Add an animation to jQuery scrolling sidebar - javascript

I am using a scrolling sidebar function in jQuery and would like to add an animation to the transition. How do I edit my code to apply an animation to smooth the transition when scrolling up and down on the page?
Here is my FIDDLE
Here is my js:
$(function() {
var $blah = $("#blah"),
$window = $(window),
offset = $blah.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$blah.css('top','120px');
} else {
$blah.css('top','440px');
}
});
});
Here is my CSS:
#blah {
display:none;
top: 320px;
right: 30px;
position: fixed;
margin: 0 20px 0 20px;
padding: 0px !important;
}

Try using .stop().animate(). The reason why I recommend using .stop() before .animate() is to prevent the effects from chaining excessively. Basically you're going to instruct the browser to "drop what you're doing now when I scroll" and then "start animation".
$(function () {
var $blah = $("#blah"),
$window = $(window),
offset = $blah.offset();
$window.scroll(function () {
if ($window.scrollTop() > offset.top) {
$blah.stop().animate({
top: 50
});
} else {
$blah.stop().animate({
top: 100
});
}
});
});
See fiddle here - http://jsfiddle.net/4VbDN/6/
[Edit]: You can even adjust the duration of the animation as well as assign a callback function even .animation() is triggered. For more instructions, check the jQuery API for .animate() :)

Related

How can I make a containers Position: sticky; until scroll amount is met in viewport

I am trying to recreate this effect in WordPress using the Elementor builder, where the section stays the same/sticky until the user has scrolled a number of times/all the scroll effects are complete. Any advice on how I can best achieve this? Or if there is a plugin that does this?
From inspect, all I can see is that the container is set to "position: sticky;" but this is not working for me in Wordpress.
What additional steps do I need to take that I'm missing? Thanks!
Have you tried $(window).scroll() function?
JS:
jQuery(function($) {
$(document).ready(function() {
var div_top = $('.sticky-bar').offset().top; //define your sticky div
$(window).scroll(function() {
var window_top = $(window).scrollTop() + 61;
if (window_top > div_top) {
if (!$('.sticky-bar').is('.sticky')) {
$('.sticky-bar').addClass('sticky');
}
} else {
$('.sticky-bar').removeClass('sticky');
}
});
});
});
CSS:
/* sticky state */
.sticky-bar.sticky {
position: sticky;
}
/* normal state */
.sticky-bar {
position: relative;
}

Lazy Load and infinitive scrolling issue in jQuery to find new height of an element with position absolute?

I have a div element with position absolute and overflow scroll like this:
<style>
.sevencov {
position: absolute;
width: 61.333%;
left: 16.667%;
top: 46px;
bottom: 0;
right: 0;
overflow: auto;
}
</style>
<div class="sevencov">
<a id="load-more" class="load-more" title="Load More" onclick="myFunction()"></a>
</div>
I want to fire the load more button at a certain % of the div on scroll, using jQuery I tried this:
$(function () {
var prevHeight = $('.sevencov').height();
$('.sevencov').scroll(function () {
var curHeight = $(this).height();
if ($(this).scrollTop() > ($(document).height() - curHeight)*44) {
$('#load-more').click();
}
});
});
But the problem is that it fires multiple times because the height of my div sevencov is always the same and I'm not able to find a solution, what am I doing wrong?
This is called as Lazy Loading
You can play with scrollTop, innerHeight and scrollHeight as below.
Documentation
scrollTop - Get the current vertical position of the scroll bar for the element
innerHeight - Get the current computed inner height (including padding but not border) for the element
scrollHeight - The height of an element's content, including content not visible on the screen due to overflow
In the below snippet, you can place your ajax call.
Also, the below snippet had window.loadProfile = loadProfile; to make sure your inline onclick works with the parameters onClick="loadProfile(184, '', 'user69')". If possible, you can replace this with jquery click event like, $('#load-more').on('click', function(){ /* ajax call */ });
$(function () {
var testContent = 'The quick brown fox jumps over the lazy dog. ';
var increment = 20;
var contentLoading = false;
var sevencovDiv = $('.sevencov');
function loadProfile(id, text, user) {
// You can do a ajax call here instead of a below code
for(var i = 0; i < increment; i++) {
sevencovDiv.html(sevencovDiv.html() + testContent);
}
contentLoading = false; // make this false once the content loaded from ajax call
}
loadProfile();
window.loadProfile = loadProfile;
$('.sevencov').scroll(function () {
if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
if(!contentLoading) {
//loadMore();
contentLoading = true;
$('#load-more').click();
}
}
});
});
.sevencov {
position: absolute;
width: 61.333%;
left: 16.667%;
top: 46px;
bottom: 0;
right: 0;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sevencov">
<a id="load-more" class="load-more" title="Load More" onClick="loadProfile(184, '', 'user69')"></a>
</div>
As mentioned in another question (here), to get the height of a overflow element, you should use $('.sevencov')[0].scrollHeight instead of .height()

How to make float navbars with JS and CSS?

How can I make my lower navbar to stay in the top when I scrolling down? I mean I want to hide only upper navbar? The lower navbar should take place of upper nav.
I tried to affix function:
$('.navbar-lower').affix({
offset: {top: 50}
});
But my code doesn't work.
Here is my try on jsFiddle: http://jsfiddle.net/hw3gxhhf
How can I fix it?
PS
Also I use jquery.bootstrap-autohidingnavbar.min.js
$("div.navbar-fixed-top").autoHidingNavbar({
"showOnBottom": false,
"showOnUpscroll": false
});
You can always listen for the scroll event, and check the scrollTop value. Once you've reached the 50px threshold, you change the margin-top value:
window.addEventListener('scroll', function(){
if (document.body.scrollTop >= 50) {
$('.navbar-lower').css('margin-top','0px');
} else {
$('.navbar-lower').css('margin-top','50px');
}
})
Try using the .scroll function to addClass of position:fixed;
and z-index:10;
script-
$(window).scroll(function () {
var scrolled = $(window).scrollTop();
var elemTop = $('#move').offset().top;
if (scrolled >= elemTop) {
$('body').addClass('nav-is-fixed');
}
else {
$('body').removeClass('nav-is-fixed');
}
});
css-
.nav-is-fixed #move {
position: fixed;
top: 0;
z-index:10;
}

How can I make a hidden image appear after scrolling down a certain amount of pixels?

I've begun experimenting with javascript/jquery and have hit my first snag. Everything works but that. I have a nav bar that fixes to the top of the page when you scroll down to it and it has a hidden image in it. I'm trying to make it visible and fade in when the nav bar hits the top and fade out when you scroll back up. I've tried using several solutions but nothing seems to work. I'm pretty sure the problem is me failing at writing this so can anyone shine some light?
CSS:
#navimg {
padding: 0px 0px 0px 0px;
margin: 0px;
height: 45px;
visibility: hidden;
}
Javascript:
$(function() {
var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop();
if (scroll_top > sticky_navigation_offset_top) {
$('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#sticky_navigation').css({ 'position': 'relative' });
}
};
sticky_navigation();
$(window).scroll(function() { //
sticky_navigation();
});
});
$(window).scroll(function(){
if($(window).scrollTop()<200){
$('#navimg').css({ 'visibility': 'visible' });
} else {
$('#navimg').css({ 'visibility': 'hidden' });
}
});
What I do when scroll down (navbar fixed top), I switch css class :
$(window).scroll(function () {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});

Why is the reverse animate() not firing right away?

I'm using $(window).scroll to animate the top header of my site when scrolling away from the very top of the viewport. The initial condition works fine, with all my animate() effects working. The problem is that when I scroll back to the top of the page, the header doesn't animate back to the original settings (a few times it has, but after a long pause).
jsfiddle: http://jsfiddle.net/3ocbkkyk/
jQuery:
var $headerBar = $(".header"),
$window = $(window),
offset = $headerBar.offset(),
topPadding = 0;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
//$headerBar.stop().animate({
//marginTop: $window.scrollTop() - offset.top + topPadding
//});
console.log('Left the Top');
// Add class 'fixed'
$headerBar.addClass('moved');
$('p.mainprinav_text').animate({ padding: '20px 45px 20px 0' });
$('ul.mainprinavlist li a').animate({ padding: '20px 35px' });
$('div.headerlogo').animate({ top: '6px' });
$('div.headerlogo img').animate({ width: '90px' });
$('body.site').animate({ paddingTop: '38px' });
} else if ($window.scrollTop() <= offset.top) {
//$headerBar.stop().animate({
//marginTop: 0
//});
console.log('Back to Top');
// Remove class 'fixed'
$headerBar.removeClass('fixed');
$('p.mainprinav_text').animate({ padding: '39px 45px 39px 0' });
$('ul.mainprinavlist li a').animate({ padding: '39px 35px' });
$('div.headerlogo').animate({ top: '13px' });
$('div.headerlogo img').animate({ width: '120px' });
$('body.site').animate({ paddingTop: '0' });
}
});
The Problem
is that there is nothing to prevent buildup.
if you add .stop() before each animate(...) then it will prevent the queue buildup you're experiencing that causes the delay in animations.
Like in this fiddle...
Though there are also other things that can make this better as well. You should have a switch so each part of the script only fires once, the animations can be replaced with css so you could just toggle a class, and the whole thing can be done with much less code.
If you're interested in these other changes I can make another fiddle to illustrate.

Categories