I'm working on a header banner that is hidden at the start but appears when the user scrolls down on the page. When the user scrolls back up to the top of the page it should disappear again and keep doing it until the user exits (there is an exit button on the banner which adds a cookie so if the user exits it won't show again).
The issue I'm having is that either the banner won't show up again when I scroll back up to the top of the page, or it will just keep showing up even after exiting. I've tried several options but nothing has worked so far.
function desktopHeader() {
$(window).on('scroll', function() {
console.log( $(this).scrollTop() );
});
var $headerBanner = $('.module-header-banner');
$('.close-btn').on("click", function () {
$.cookie("headerbanner", "exit", {expires: 2/24});
$('.module-header-banner').addClass("exit").fadeOut();
});
if($.cookie('headerbanner') == null) {
if($(window).scrollTop() > $('.site-header').height()){
$headerBanner.addClass('active').fadeIn();
}
$(window).scroll(function() {
if($(window).scrollTop() > $('.site-header').height()){
$headerBanner.addClass('active');
} else if($(window).scrollTop() < $('.site-header').height()) {
$headerBanner.removeClass('active');
}
});
}
}
At a loss -- if anyone has any advice would be best appreciated. Thanks!
Try to add your scroll event outside of the click function,
here is a updated code
function desktopHeader() {
$(window).on('scroll', function() {
console.log( $(this).scrollTop() );
});
var $headerBanner = $('.module-header-banner');
$('.close-btn').on("click", function () {
$.cookie("headerbanner", "exit", {expires: 2/24});
$('.module-header-banner').addClass("exit").fadeOut();
});
if($.cookie('headerbanner') == null) {
if($(window).scrollTop() > $('.site-header').height()){
$headerBanner.addClass('active').fadeIn();
}
}
$(window).scroll(function() {
if($(window).scrollTop() > $('.site-header').height()){
$headerBanner.addClass('active');
}
else if($(window).scrollTop() < $('.site-header').height()) {
$headerBanner.removeClass('active');
}
});
}
Related
I want to load ajax data when I reach the end of a particular div.
I use now :
$(window).scroll(function() {
if (! loadingAjax) {
if ($(window).scrollTop() > ($element.offset().top + $element.outerHeight() - 500)) {
from++;
loadingAjax = true;
loadMyData(from);
}
}
});
It seems a little random when I show console for example, or on smartphone.
What is the best way to detect user is reaching end of a div ($element here) ? With an offset of 50px for example before the end ?
Please have a look at the solution and you will be console logged in the last div.
$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('.posts').offset().top +
$('.posts').outerHeight() - window.innerHeight) {
console.log('End Div');
}
});
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");
}
});
Please take a look at this website
I'm trying to implement two arrows on top and bottom of the gallery so when people mouse over the arrows, the content would scroll top and bottom respectively.
Here is the code I'm currently using that scrolls the content down when you hover over the bottom arrow. But there are two issues with it:
I want the scrolling to stop when the user mouses off
Hopefully do not display the arrow(s) if there is no more content left to scroll
if ( $("body").hasClass('projects') ) {
$("#jig1").height($(document).height() - 187);
$("#scroll-to-bottom").hover(
function () {
$("#jig1").animate({ scrollTop: $(document).height() }, 10000);
},
function () {
}
);
}
Can anyone offer an improved solution?
Answer to the seccond question.
Add the inner wrapper to the divs blocks
Html should look like this
<div id="jig1">
<div id="jig1Inner">
... here put rest of the code
if ($("body").hasClass('projects'))
{
$("#jig1").height($(document).height() - 187);
var watchScrollers = function()
{
var tmp = $("#jig1Inner").height() - $("#jig1").height();
if (tmp == $("#jig1").scrollTop())
{
$("#scroll-to-bottom").css("visibility","hidden");
}
else
{
$("#scroll-to-bottom").css("visibility","visible");
}
if ($("#jig1").scrollTop() == 0)
{
$("#scroll-to-top").css("visibility","hidden");
}
else
{
$("#scroll-to-top").css("visibility","visible");
}
}
$("#scroll-to-bottom").unbind("hover").hover(function() {
$("#jig1").stop().animate({scrollTop: $("#jig1Inner").height() - $("#jig1").height()}, 10000);
}, function() {
$("#jig1").stop(); //stops the animation
watchScrollers();
});
$("#scroll-to-top").unbind("hover").hover(function() {
$("#jig1").stop().animate({scrollTop: 0}, 10000);
}, function() {
$("#jig1").stop(); //stops the animation
watchScrollers();
});
watchScrollers();
}
Try this:
$("#scroll-to-bottom").mouseover( function () {
$("#jig1").animate({ scrollTop: $(document).height() }, 10000);
});
$("#scroll-to-bottom").mouseout( function () {
$("#jig1").stop()
});
I'm trying to create an infinite scroll feature on my site but it isn't working.
My code:
var post = {}
post.load_moreBtn = $('#home_load_more');
if($(window).scrollTop() + $(window).height() == $(document).height()) {
post.load_moreBtn.trigger('click');
}
post.load_moreBtn.on('click', function () {
$(this).html('<img src="' + base_url + 'images/core/loader2.gif"/>');
post.load_more_messages($(this).attr('data-last_id'));
});
If I put an alert in place of the trigger it works,also if I remove the scroll detection bit, the load more works fine. Just can't get it to autoload, please help.
It's easy with jQuery:
$(function(){ //on document ready
$(document).scroll(function (e) { //bind scroll event
var intBottomMargin = 300; //Pixels from bottom when script should trigger
//if less than intBottomMargin px from bottom
if ($(window).scrollTop() >= $(document).height() - $(window).height() - intBottomMargin) {
$("#home_load_more").click(); //trigger click
}
});
});
I bind this in the