I have three sections home_bg,barman,galeria. I want, that after scroll to section who feel $(window).scrollTop() add class. When this scroll <= 0.5 * height feeling section, auto scroll to top feeling section.
Example: http://www.dishoom.com/
<script>
jQuery(document).ready(function ($) {
$(window).scroll(function () {
scroll = $(window).scrollTop();
/* scrollAnch = $("section.nomargin");*/
var height_check = jQuery(window).height() ;
$(document).mousewheel(function (event) {
if (event.deltaY) {
$(window).scroll(function () {
if(scroll >= $("section#home_bg").offset().top)
{
$('section#barman').removeClass('snaps-active');
$('section#galeria').removeClass('snaps-active');
$('section#home_bg').addClass('snaps-active');
if(scroll >= ($("section#home_bg").offset().top + (0.5*height_check)))
{
$('section#home_bg').removeClass('snaps-active');
}
}
if (scroll >= $("section#barman").offset().top) {
$('section#barman').addClass('snaps-active');
$('section#galeria').removeClass('snaps-active');
$('section#home_bg').removeClass('snaps-active');
if(scroll >= ($("section#barman").offset().top + (0.5*height_check)))
{
$('section#barman').removeClass('snaps-active');
}
}
if(scroll >= ($("section#galeria").offset().top)) {
$('section#home_bg').removeClass('snaps-active');
$('section#barman').removeClass('snaps-active');
$('section#galeria').addClass('snaps-active');
if (scroll >= ($("section#galeria").offset().top + (0.5 * height_check))) {
$('section#galeria').removeClass('snaps-active');
}
}
});
}
});
});
});
</script>
Related
So I got this script :
$(function() {
var header = $(".header-nav");
$el = $(".header_logo a").clone().addClass('cloned');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
header.addClass("scrolled");
} else {
header.removeClass("scrolled");
}
if (scroll > 50) {
$el.appendTo(".header-logo");
} else {
$('.cloned').remove();
}
});
});
It makes the navbar fixed on scroll and clone logo and reset it on top page.
But if I refresh page at the middle, navbar isn't displayed cause it displays only on scroll.
Is there a way to fix that please?
Thanks.
As evolutionxbox suggested you should move your code into a function and call it both on scroll and on load like this:
$(function() {
var header = $(".header-nav");
$el = $(".header_logo a").clone().addClass('cloned');
myScroller();
$(window).scroll(function() {
myScroller();
});
function myScroller(){
var scroll = $(window).scrollTop();
if (scroll >= 50) {
header.addClass("scrolled");
} else {
header.removeClass("scrolled");
}
if (scroll > 50) {
$el.appendTo(".header-logo");
} else {
$('.cloned').remove();
}
}
});
I'm facing a very strange error, which is animation on body during mouse scroll. I think its happening because of the jQuery event window.scroll. I have tried a lot of things like unbinding of animation on mouse scroll, but nothing works. Below is my code.
$(document).on("scroll", function () {
var lastScrollTop = 0;
var windowHeight = $(window).scrollTop();
var seccion1 = $("#seccion1").height();
var seccion2 = $("#seccion2").offset().top;
var alturaseccion2 = $("#seccion2").height();
//this function returns in which section is the user with the scroll
var localizacion = comprobarSeccion(seccion1, seccion2);
if (windowHeight > lastScrollTop) {
// down scroll
console.log("scrollabajo");
if (localizacion == 1) {
$("html, body").animate({
scrollTop: $("#seccion2").offset().top
}, 2);
$(document).bind("scroll");
} else if (localizacion == 2) {
if (windowHeight >= ((alturaseccion2 * 0.80) + seccion2) && windowHeight <= (alturaseccion2 + seccion2)) {
} else {
}
}
} else {
// up scroll
console.log("scrollarriba");
}
lastScrollTop = windowHeight;
});
´´´
I'm not sure what you are trying to accomplish, but if your trying to trigger an event with a specific scroll value you can use the code below
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
alert("scroll is greater than 500 px)
} else if(scroll==500){
alert("scroll has hit 500px");
}
});
I don't know why but the nav should appear again when I reach the bottom of the site. How can I fix that?
Opposite works = every time you reach the top of the site, the nav appears. If you scroll down at the beginning = nav disappears + if you hover on the nav = it appears again and disappears by leaving it.
nav appears while at the top + disappears while scrolling 👍🏼
$(document).ready(function() {
$(window).on('scroll', function() {
$('.nav-visibility').css("opacity", $(window).scrollTop() > 0 ? "0" : "1")
})
})
nav show and hide while hovering 👍🏼
$('nav').mouseover(function() {
$('.nav-visibility').css("opacity", "1");
});
$('nav').mouseout(function() {
if ($(window).scrollTop() > 0) {
$('.nav-visibility').css("opacity", "0");
}
});
nav should appear while reaching the bottom / doesn't work?! 👎🏼
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$('.nav-visibility').css("opacity", "1");
}
});
Try this, I have added condition to detect top and bottom and shown navbar accordingly
$(document).ready(function() {
var navbar = $('.nav-visibility')
$(window).on('scroll', function() {
//Check for top and bottom
if($(window).scrollTop() + $(window).height() >= $(document).height() || $(window).scrollTop() == 0) {
navbar.css("opacity", "1");
}else{
navbar.css("opacity", "0");
}
})
})
For mouseout
$('nav').mouseout(function() {
var navbar = $('.nav-visibility')
if($(window).scrollTop() + $(window).height() <= $(document).height() && window.scrollY > 0){
navbar.css("opacity", "0");
}
});
Scroll Event Method:
document.addEventListener('scroll', function(e) {
if((document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight){
// Do something!
// document.getElementById('foo').setAttribute("style", "display: none");
}
}, true);
Example:
document.addEventListener('scroll', function(e) {
if((document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight){
document.getElementById('foo').innerHTML = "Reached Bottom";
document.getElementById('foo').setAttribute("style", "height: 100px;");
}
}, true);
<div id="foo" style="height: 1800px">Scroll to Bottom</div>
Thank you again guys! The problem is fixed and it works like how I expected.
$(document).ready(function() {
var navbar = $('.nav-visibility')
$(window).on('scroll', function() {
//Check for top and bottom
if ($(window).scrollTop() + $(window).height() >= $(document).height() || $(window).scrollTop() == 0) {
navbar.css("opacity", "1");
} else {
navbar.css("opacity", "0");
}
})
})
$('nav').mouseover(function() {
$('.nav-visibility').css("opacity", "1");
});
$('nav').mouseout(function() {
var navbar = $('.nav-visibility')
if ($(window).scrollTop() + $(window).height() < $(document).height() && window.scrollY > 0) {
navbar.css("opacity", "0");
} else if ($(window).scrollTop() + $(window).height() > $(document).height() && window.scrollY < 0) {
navbar.css("opacity", "1");
}
});
jQuery:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$(".class").addClass("bgposi");
// $(".top").addClass("fixd");
// $(".logo").addClass("maxwidth");
if (scroll >= 50) {
$(".class").addClass("bgposi");
// $(".top").addClass("fixd");
// $(".logo").addClass("maxwidth");
}
}
});
So, basically my class that I'm adding on scroll. .bgposi is moving the background image position when I scroll past 50px on the page using (window).scroll(function(). Which works fine, so my first if statement alone.. However, I'm trying to reverse it with another if statement, when the user scrolls back up - this is where I'm failing.. any pointers?
Correct the following in your second if statement:
Do not nest it.
Change the comparison operator >= to <=.
Use removeClass.
Change:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$(".class").addClass("bgposi");
// $(".top").addClass("fixd");
// $(".logo").addClass("maxwidth");
if (scroll >= 50) {
$(".class").addClass("bgposi");
// $(".top").addClass("fixd");
// $(".logo").addClass("maxwidth");
}
}
});
To:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$(".class").addClass("bgposi");
// $(".top").addClass("fixd");
// $(".logo").addClass("maxwidth");
} else if (scroll <= 50) {
$(".class").removeClass("bgposi");
// $(".top").removeClass("fixd");
// $(".logo").removeClass("maxwidth");
}
});
You could cache some reused selectors (doing the lookup once), like so:
$(window).scroll(function() {
var scroll = $(this).scrollTop();
var $class = $(".class"),
$top = $(".top"),
$logo = $(".logo");
if (scroll >= 50) {
$class.addClass("bgposi");
$top.addClass("fixd");
$logo.addClass("maxwidth");
} else if (scroll <= 50) {
$class.removeClass("bgposi");
$top.removeClass("fixd");
$logo.removeClass("maxwidth");
}
});
$(window).scroll(function() {
var scroll = $(this).scrollTop();
var $class = $(".class");
if (scroll >= 50) {
$class.addClass("bgposi");
} else if (scroll <= 50) {
$class.removeClass("bgposi");
}
});
body {
height: 200vh;
background-color: peachpuff;
}
.class {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 20%;
background-color: dodgerblue;
}
.class.bgposi {
background-color: purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class"></div>
I have a div element #btns that is hidden by default. It should be displayed on scrolling 200px from top and again hidden after 500px from top.
Here is my (non-working) code:
$(window).scroll(function() {
if ($(this).scrollTop()>200) {
$('#btns').fadeIn();
}
elseif ($(this).scrollTop()<500) {
$('#btns').fadeIn();
} else {
$('#btns').fadeOut();
}
});
You can add a class hide in button like this:
$(function() {
$(window).scroll(function() {
console.log('scrolling ', $(window).scrollTop(), $(document).height());
if($(window).scrollTop() >= 200 && $(window).scrollTop() <= ($(document).height() - 500)) {
$('#btns').removeClass('hide');
} else {
$('#btns').addClass('hide');
}
});
});
DEMO https://jsfiddle.net/1ks8at6r/5/