Animate div's CSS top property when scrolling down - javascript

I have a notification that pops up during difference instances on my site, and I'd like that notification to follow the menu that animates when you scroll down.
The code I have is as follows:
<script type='text/javascript'>
var messageFollow = $('.woocommerce-info').offset().top;
$(window).on( 'scroll', function(){
if ($(window).scrollTop() >= messageFollow) {
$('.woocommerce-info').css({top: "150px"});
} else {
$('.woocommerce-info').css({top: "74px"});
}
});
</script>
The notification has a value right now of top: 150px which looks great when you're at the top of the screen but top: 74px looks great when scrolled down.
I also want it to animate, but I have no idea how to implement that as well.
A clip to demonstrate: https://www.dropbox.com/s/p6i95f5gkbyn4nm/MessageNotification.mov?dl=0

jQuery has a built-in animate function.
Just replace css with animate and make sure the value is integer.
You can also give a duration in milliseconds as a second parameter to animate function.
$('.woocommerce-info').animate({top: 150},500);

Related

Scroll to bottom button behaviour when scroll is 100% bottom

I am using jquery-smooth-scroll for controlling anchor scrolling. There is a feature/option to decide behaviour after scroll. I chose to hide the button after it gets to the bottom anchor. I then implemented some jquery to bring that button back when scroll was no longer 100% at the bottom of the page.
What I am struggling to do is make sure that the button always fades away when scroll is 100% down. The same way a standard back to top works but opposite ends of the page in my case.
Please see this fiddle I have put together https://jsfiddle.net/k253jvt8/
/* show and hide button*/
$(window).bind("mousewheel DOMMouseScroll scroll", function (e) {
if (document.body.scrollTop == 0) {
$('.saveForm').fadeIn();
//below isnt working to fade away .saveform when scroll is 100% bottom
} else {
$('.saveForm').fadeOut();
}
});
The above is the code I use to bring back the button after it disappears, but then cant get it to disappear again when manually scroll to the bottom, it only disappears again when I use the button to get to the bottom - have a play with my fiddle and you will see what I mean.
In your fiddle, your wrapping <div class="reportFormPage"> is positioned absolute in relation to the document.
As a result your <body> element does not take it in to account when determining its height; hence it always has a height value of 0. Because of this your 'else' condition never occurs.
Removing the position: absolute; css rule resolves this issue.
Try this
if ($(window).scrollTop() ==0) {
$('.saveForm').fadeIn();
} else if($(window).scrollTop() < $(document).height()) {
$('.saveForm').fadeOut();
}
});
along with removing position:absolute as dommmm has said.
Here is the working fiddle https://jsfiddle.net/sd6sh4v6/2/
See if you like the change I brought to your smoothScroll by using no-js fallback.

Animate image left to right on scroll

What I am trying to do is I have around 6 inline images I want slide them left to right on specific position and stop there for each image. And images have to slide at the time the scrool comes over them.
I tried this javascript for it (totally new to JS)
$(window).scroll(function(){
if($this.scrollTop()>300)
{
$('.onfoot1').slideright();
}
function slideright(){
var a = getElementsByClassName('.onfoot1');
var stoppos = 100;
if (parseInt(a.style.left)< stoppos )
{
a.style.left = parseInt(a.style.left) + 3 + "px";
setTimeout(slideright , 1);
}
}
});
Markup
<div class="onfoot1"></div>
CSS
div.onfoot1{
content:url(../img/onfoot1.jpg);
left:0;
}
I've put together a working examle for your code: https://jsfiddle.net/hmzw9y65/
I've made a few assumptions there... You are using $(...) syntax so I guessed you are using JQuery. JQuery has a .animate() function which should do the trick (http://api.jquery.com/animate/). Also I guessed that you may want to make the css-position of the div fixed so it stays on screen when you scroll.
EDIT: I noticed that you don't want you image on the bottom of the screen but animating when screen reaches it. Updated my fiddle to do that: https://jsfiddle.net/hmzw9y65/1/

Make a Div slide away on scroll

I want to make my header content (logo) slide away to the left on scroll, leaving the fixed menu left. I have gotten the content to disappear but the slide itself is from top to bottom which makes it just appear as a longer scroll more than a slide away effect.
What I'm trying to accomplish is something like this header or similar: http://lifeinthegrid.com/simple-css-fixed-header/
As you see, once you scroll the header makes a really nice slide away to the left and leaving a fixed menu hanging.
This is the code I have been using so far:
<script>
$(window).scroll(function () {
if ($(this).scrollTop() > 80) {
$("#header_content").hide(300);
} else {
$("#header_content").show(300);
}
});
</script>
The code makes the div disappear but not with a nice slide away to the left.
you can use jquery ui.
$('#header_content').hide("slide", {direction: "right" }, 1000);
read the docs for more information.
Try using
$("#header_content").animate(function(){
right: 9999;
}, 300});
To animate the css right property to 9999, and again back to 0. You will need to have position set to something other than static in your CSS for this to work.
Source(s)
jQuery API - .animate()

Change scrollTop offset

I am using bootstrap 3 and have a fullscreen hero unit at the top of my page, below that is my navigation. I have some js which allows my navbar to stick to be fixed at the top after you scroll past the full screen hero. Also some js for my smooth scrolling links.
The problem is the offset is different before you scroll past the full screen hero and after. But it works fine when you are past the jumbotron. I have tried a bunch of different things but I can seem to get this to work exactly.
Check out the fiddle here.
Here is my js for the smooth scrolling links:
$(document).ready(function() {
// navigation click actions
$('.scroll-link').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 1200);
});
// mobile nav toggle
$('#nav-toggle').on('click', function (event) {
event.preventDefault();
$('#main-nav').toggleClass("open");
});
});
// scroll function
function scrollToID(id, speed){
var offSet = 95;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}
By changing var offSet = 95; I am able to adjust the offset but what would be the best way to use 180 before the navbar sticks to the top but 95 when it does?
Also here is the js I am using for my navbar:
$(function () {
/* $(".navbar-fixed-top").css({"top":$(".jumbotron").height()});
$(window).resize(function (e) {
$(".navbar-fixed-top").css({"top":$(".jumbotron").height()});
});*/
$(document).on( 'scroll', function(){
console.log('scroll top : ' + $(window).scrollTop());
if($(window).scrollTop()>=$(".jumbotron").height())
{
$(".navbar").addClass("navbar-fixed-top");
}
if($(window).scrollTop()<$(".jumbotron").height())
{
$(".navbar").removeClass("navbar-fixed-top");
}
});
});
Are you open to angular.js? I have a directive i use for this. As seen here.
I'll grab the plunker link for you. you might find the code helpful.
Essentially you need to create a ghost dom element to take the place of the menu when you pull it to an new layout position.
EDIT: Here it is
I won't suggest grabbing angular just for this. But you can use the basis of the events and logic to build your own solution.
This here is creating an element and placing in its place
$scope.spacer = $element.after(
'<div class="spacer" style="height:' + $element[0].clientHeight + 'px"> </div>').next();
then this element is removed when the menu is back to its static position.
Inspect the dom and watch how it changes, this will probably help you see the events and changes that need to take place.
EDIT 2 SOLUTION:
HERE is the concepts applied to your JSFiddle
It's not the best solution but by adding margin: 0 0 -100px 0; to your .navbaryou lose the spacing issue.
Also you're getting 22 console errors because of missing images. I'm not saying that this is causing any major problems but you would be better off losing them.
The problem is that when you have not scrolled past the hero, navigation is still part of the layout and pushes content bellow it a little lower. When you scroll past (either manually or via a script) the hero, navigation is removed and fix positioned. That makes everything which was bellow to "jump up" exactly of the navigation height.
That means if portfolio was 1000px from the top, on click you say: go 1000px from top; but then porfolio moves 100px up (as explained above) meaning it is now 900px from the top while the window scrolled 1000px as you asked.
When you have scrolled past the hero, nothing changes its position.

MooTools Tween Stutter/Hiccup

I am doing a rather simple Tween animation using MooTools. The opening animation is perfectly smooth. But then I added the closing animation (opposite of the opening animation), but it seems to stutter/hiccup at the end almost every time.
I tried the following with no success:
Removed all HTML content from the expanding DIV
Passing the Bounce settings directly to the Set function instead of using the variable
Commented the #content animation to be sure there is only 1 animation running
Commented the addClass and removeClass actions
I can't figure out what's causing the problem. Maybe someone else can have a look…
I put the test-case online here: http://dev.dvrs.eu/mootools/
window.addEvent('domready', function() {
// Set initial Div heights
$('sideBar').setStyle('height', window.getSize().y);
$('sideMenu').setStyle('height', window.getSize().y);
// Set Div heights on Window resize
window.addEvent('resize', function() {
$('sideBar').setStyle('height', window.getSize().y);
$('sideMenu').setStyle('height', window.getSize().y);
});
var bounce = {
transition: Fx.Transitions.Back.easeOut,
duration: 500
};
$$('.button.closeMenu').addEvent('click', function(event) {
event.preventDefault();
$$('.button').removeClass('active');
this.addClass('active');
$('sideMenu').set('tween', bounce);
$('sideMenu').tween('width', 0);
$('content').set('tween', bounce);
$('content').tween('margin-left', 90);
});
$$('.button.menu').addEvent('click', function(event) {
event.preventDefault();
$$('.button').removeClass('active');
this.addClass('active');
$('sideMenu').set('tween', bounce);
$('sideMenu').tween('width', 300);
$('content').set('tween', bounce);
$('content').tween('margin-left', 390);
});
});
Fiddle with example here
The transition you are using goes over the values defined as final value in the .set(property, value);. So when opening the final width is 300px but the transition/effect goes over that and than soft back to the final value.
This works great when opening because width can be 310px or more and then return to 300px, but when with has a transition under the with 0px, it doesn't work so good. It actually works ok if the final width is 10px (check here), but that's not the effect you want.
So my suggestion is to fix it with CSS, or change the transition when closing the sidebar, or use another effect altogether.
Option 1: fiddle - same transition opening, no easeout closing
Option 2: fiddle - same effect as you have but played with CSS and hidded 10px of the sidemenu under the sidebar. (z-index:3; on #sideBar and left:80px;width: 10px; on #sideMenu. Also 10px as the final value for the tween.)
To check different transitions at Mootools demo's look here.

Categories

Resources