So I have a piece of jquery that will stick a div to the top of the page once scrolled past, this works well !!
now im trying to set it so one the bottom on that div is reached it stops sticking to the head, I can seem to work this.
any help is appreciated.
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
}
if ($(window).scrollTop() > 1400) {
$('sticky-anchor').slideDown();
}
else {
$('#sticky').removeClass('stick');
}
}
$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
Shouldn't
$('#sticky').removeClass('#stick');
be
$('#sticky').removeClass('stick');
??
Related
I tried to implement a div on my website, that sticks to the top of the browser as soon as it scrolls out of the viewport. I found a script that does this pretty good and it works well on the desktop. When I test it on the iphone I have a short lag where the div scrolls out for about a half second and pop then up at the desired location. Has anybody a clue how I could tweak that script?
Here is the link: jsFiddle
Thanks for your help!
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
$('#sticky-anchor').height($('#sticky').outerHeight());
} else {
$('#sticky').removeClass('stick');
$('#sticky-anchor').height(0);
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
Maybe you can use setTimeout and clear the interval when the scroll is invoked multiple times. This might help by limiting the number of times the callback is invoked.
$(function() {
var timer;
$(window).scroll(function() {
clearInterval(timer);
timer = setTimeout(function() {
sticky_relocate();
}, 50);
});
sticky_relocate();
});
Hey guys I am having an issue with $(window).width if statements in jQuery. For some reason my function is running even when the window width is smaller than 991 pixels however my if statement states that it should run if the window width is greater than 991.
function ctaFixTop() {
var mn = $("#new-car-offer-cta");
var offerHead = $('#new-car-offer-head');
mns = "new-car-offer-cta-active";
var hdr = 0;
var ctaHeight = $("#new-car-offer-cta").height();
$('.header-wrapper, #top-bar, #new-car-back, #new-car-offer-head').each(function() {
hdr += $(this).outerHeight();
});
if ($(window).width() > 991) {
$(window).scroll(function() {
if ($(this).scrollTop() > hdr) {
offerHead.css('margin-bottom', ctaHeight);
mn.addClass(mns);
} else {
offerHead.css('margin-bottom', 0);
mn.removeClass(mns);
}
});
}
}
$(window).resize(ctaFixTop);
ctaFixTop();
As you can see the ctaFixTop function is being called twice, once on initial load and whenever the window is resized. When I initially load the page with a window width below 991px the function works how it should however if I then increase the windows size past 911px and size it back down under 911px the $(window).scroll function will be called even when it's wrapped in the if statement that states that it should only run if the window width is greater than 991.
Any idea why this might be happening as I have tried trouble shooting this and simply can't understand why the function is being called even with the if statement around it.
Thanks
That is because the scroll event is already attached to the window and you are not removing it. What you need to do is put the
if ($(window).width() > 991) {
inside the .scroll() method like this.
$(window).scroll(function() {
if ($(window).width() > 991) {
if ($(this).scrollTop() > hdr) {
offerHead.css('margin-bottom', ctaHeight);
mn.addClass(mns);
} else {
offerHead.css('margin-bottom', 0);
mn.removeClass(mns);
}
}});
I'm hoping to fade in a div when the page has been scrolled away from the top of the page, however I want this div to be hidden again when approaching the bottom of the page.
To be specific, I want the div to be hidden when within 200px of the top or 200px of the bottom.
I have two scripts which work independently, but when both active, a conflict between the two causes the div to flash in and out of view.
How would I combine the following scripts to avoid this conflict? Any help would be most appreciated. Thanks!
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 200) {
$('#myDiv').fadeIn(500);
} else {
$('#myDiv').fadeOut(500);
}
});
});
and
$(function () {
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
$('#myDiv').fadeIn(500);
} else {
$('#myDiv').fadeOut(500);
}
});
});
how's this:
$(function () {
var $window = $(window);
$window.scroll(function () {
var scrollTop = $(this).scrollTop();
// only fadeIn between 200 from top and 200 from bottom
if (scrollTop > 200 && scrollTop < $(document).height() - $window.height() - 200) {
$('#myDiv').fadeIn(500);
} else {
$('#myDiv').fadeOut(500);
}
});
});
Example fiddle
I am using Chrome, and when i reload my page it brings me to the point of the page i was before reloading. So when i already scrolled half of the page and i reload it, chrome brings me back to where i scrolled to before.
I got a fixed nav-bar on my page:
$(document).ready(function() {
var mn = $(".top-menu");
mns = "main-nav-scrolled";
hdr = $('header').height();
$(window).scroll(function() {
if( $(this).scrollTop() > hdr) {
mn.addClass(mns);
} else {
mn.removeClass(mns);
}
});
});
The navigation works, but when i reload the page it is dissapeared until i start scrolling again. Someone has any idea how to fix this?
Try something like that :
$(document).ready(function() {
$(window).scroll(sticky_nav());
sticky_nav(); // Force the first call on refresh
});
function sticky_nav() {
var mn = $(".top-menu");
mns = "main-nav-scrolled";
hdr = $('header').height();
if( $(this).scrollTop() > hdr) {
mn.addClass(mns);
} else {
mn.removeClass(mns);
}
}
I'm using the following code to detect if the page is scrolled beyond 150px.
The code works fine but I'd like to know if theres any way to combine the scroll and load functions as currently I'm repeating code.
Appreciate any help.
var nav = $(".header");
$(window).scroll(function () {
if ($(this).scrollTop() > 150) {
nav.addClass("header-bg");
} else {
nav.removeClass("header-bg");
}
});
$(window).load(function () {
if ($(this).scrollTop() > 150) {
nav.addClass("header-bg");
} else {
nav.removeClass("header-bg");
}
});
Nevermind I figured it out, for anyone else who gets stuck with:
var nav = $(".header");
$(window).on("load resize scroll",function(e){
if ($(this).scrollTop() > 150) {
nav.addClass("header-bg");
} else {
nav.removeClass("header-bg");
}
});