Is there any way to add class to an element only when someone scrolls the browser page up?
Problem Filide>>
JS
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll <= 100) {
$(".nav").addClass("darkHeader");
} else {
$(".nav").removeClass("darkHeader");
}
});
Problem is this js add class when scroll-down page. But I want to add class when Scroll Up browser and after that when scroll down class will remove. See Example demo>>
If you want to know whether the user has scrolled up or down you need to track of the last scroll position. Then check if the new scroll position is greater or less than that position. You can then set the classes accordingly
// Script
lastScroll = 0;
$(window).on('scroll',function() {
var scroll = $(window).scrollTop();
if(lastScroll - scroll > 0) {
$(".nav").addClass("darkHeader");
} else {
$(".nav").removeClass("darkHeader");
}
lastScroll = scroll;
});
JSFiddle
Related
I would like to have is to add a class to a div when it is, for example, 100 pixels of the top of the viewport. So not after scrolling 100px but when it is 100px below the top of the viewport. Can anybody help me with this?
<script>
jQuery(function() {
//caches a jQuery object containing the header element
var header = jQuery('#v0');
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 2939) {
header.addClass('fixed1');
}
else {
header.removeClass('fixed1');
}
});
});
</script>
Not sure if this is exactly you want to achieve, but here's the code. If the header is more than 100px away from the top (which is not very usual because then there should be something on top of the header) of the window, then the new class is added to the header.
$(function() {
var $header = $('#v0');
$(window).scroll(function () {
if ($header.offset().top - $(this).scrollTop() > 100) {
$header.addClass('blabla');
} else {
$header.removeClass('blabla');
}
});
});
UPDATE:
Depending on your feedback, this is the first solution that came up to my mind. I think that's the behavior you need. Hope that works for you:
$(function() {
var $header = $('header');
var $video = $('#v0');
var $videoContainer = $('.videoContainer');
$(window).scroll(function () {
// Here we check if video field touches the header, and add 'fixed' class
if ((($header.offset().top + $header.height()) - $video.offset().top) >= 0) {
$video.addClass('fixed')
}
// Since both video and header is fixed now I needed some other
// element to check if we are again getting away from the header
// (scrolling up again) That's why I added the $videoContainer element
// to be able to remove the 'fixed' class.
if ($videoContainer.offset().top > ($header.offset().top + $header.height())) {
$video.removeClass('fixed');
}
});
});
Updated code:
https://jsbin.com/foyoyus/6/edit?html,css,js,output
This script makes it so when you scroll down in a browser the navigation bar disappears/hides behind the header. I was wondering if it was possible if instead it hid as soon as you scrolled down, hiding it after a user scrolls down a certain number of pixels (say 50px) to avoid touchy nav hiding on slightest scroll.
Thanks in advance for any direction.
// Nav scroll test
var prev = 0;
var $window = $(window);
var nav = $('#belowhead');
$window.on('scroll', function(){
var scrollTop = $window.scrollTop();
nav.toggleClass('hidden', scrollTop > prev);
prev = scrollTop;
});
You can put this inside your "window.on('scroll')" function:
if(scrollTop > 50) {
nav.addClass('hidden');
} else {
nav.removeClass('hidden');
}
2019 Update / Adjustment
The following could be useful for anyone else wishing to develop a header that disappears when you scroll down. I just finished making the following for a website I'm creating that required the top header to disappear when the user started scrolling, but then reappear when they start scrolling up; continuously applying this logic if you were to constantly keep scrolling up and down on the website.
For starters, a class is added to my header tag called nav-scrolled when the user scrolls past a certain point - 50px in this case. This new class can then be styled to change the background-color, add a box-shadow etc...
$(function() {
var header = $(".nav-container");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
header.addClass("nav-scrolled");
} else {
header.removeClass("nav-scrolled");
}
})
});
However, this only solved the problem of not being able to edit the headers styles if the user is scrolling from the top of the page - not anywhere on the site - the following fixes this.
var userScroll;
var scrollTop = 0;
var delta = 5;
var navHeight = $('header').outerHeight();
$(window).scroll(function(event){
userScroll = true;
});
setInterval(function() {
if (userScroll) {
hasScrolled();
userScroll = false;
}
}, 250);
The next step for me was to sequentially add and remove classes show-nav and hide-nav that had been styled to display and hide the navigation menu. The following checks whether the user has scrolled (up or down) to a value higher than my delta variable. If the user is beginning to scroll up on the website, the class show-nav is added and the header transitions in from the top of the page. If the user is scrolling down the page the class hide-nav is added, and the header is hidden.
function hasScrolled() {
var st = $(this).scrollTop();
// Ensures a higher scroll than $delta
if(Math.abs(scrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > scrollTop && st > navHeight){
// Scroll Down
$('header').removeClass('show-nav').addClass('hide-nav');
$('.nav-toggle').removeClass('open');
$('.menu-left').removeClass('collapse');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('hide-nav').addClass('show-nav');
}
}
scrollTop = st;
}
I am using slideToggle to make my header move with the page once scrollTop hit the 100. But once the scrollbar reaches to 100 and more, it keeps animating up and down for few moment.
Here is my code:
$(window).scroll(function(){
var ScrollTop = $(window).scrollTop();
if(ScrollTop>=100){
$('#main_header').removeClass("relative");
$('#main_header').addClass("fixed");
$('#main_header').slideToggle("slow");
}else if(ScrollTop<=99){
$('#main_header').removeClass("fixed");
$('#main_header').addClass("relative");
}
});
please let me know what's wrong?
You are saying to the browser, whenever the user scrolls down the page, see how far they have travelled. If they have travelled more than 99, then slide that header, otherwise do some other class toggling.
So let's say they scroll to 120, it will slide. Then they scroll down more to 140, it will slide. You have no check in place on whether it has already slid down, thus it will keep doing it. A simple approach would be to just add a boolean: -
var toggled = false;
$(window).scroll(function () {
var ScrollTop = $(window).scrollTop();
if (ScrollTop >= 100 && !toggled) {
$('#main_header')
.removeClass("relative")
.addClass("fixed")
.stop() // stop any prev animation
.css('display', 'none') // force hide so it slides
.slideToggle("slow");
toggled = true; // won't enter again until set to false
} else if (ScrollTop <= 99 && toggled) {
$('#main_header').removeClass("fixed");
$('#main_header').addClass("relative");
toggled = false; // scrolled back up, can now slideToggle again!
}
});
Use jQuery .stop() method:
$(window).scroll(function(){
var ScrollTop = $(window).scrollTop();
if(ScrollTop>=100) {
$('#main_header').removeClass("relative");
$('#main_header').addClass("fixed");
$('#main_header').stop(true).slideToggle("slow");
} else if(ScrollTop<=99) {
$('#main_header').removeClass("fixed");
$('#main_header').addClass("relative");
}
});
I have a fixed title in a DIV which scrolls under the website until the relevant section. I would like to know how to only have the DIV display once the user scrolls to the needed section.
Can you do it with Jquery
Ex -
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 400) {
$('.youdiclass').css('display', 'block');
} else {
$('.youdiclass').css('display', 'none');
}
});
I am creating a fixed position sub-nav menu bar for a responsive site. All the examples I can find of a fixed menu that sticks to top after scrolling are based on a set number of pixels from top.
However, since I am working a responsive site the pixels from top where I need the menu to come in are different based on viewport (on small screens, the menu should appear after more area scrolled down because the content fills are taller area of screen).
I have a working example and am using the following jquery script:
$(document).ready(function(){
$('#navigation a, #fixedbar a').on('click', function(e) {
e.preventDefault();
});
$(window).on('scroll',function() {
var scrolltop = $(this).scrollTop();
if(scrolltop >= 215) {
$('#fixedbar').fadeIn(250);
}
else if(scrolltop <= 210) {
$('#fixedbar').fadeOut(250);
}
});
});
As you can see the fixed bar fades in if more than 215 pixels scrolled from the top. Instead I'd like to have it appear after scrolling past a certain div. That way I know it will come in after user has fully scrolled past the intro text.
Here's my fiddle
Any good examples out there of what I want to do? Or easy way to modify the jquery script? Thanks in advance.
This modification will make it fade in after it passes the static nav
DEMO
var $nav = $("#navigation");
if(scrolltop >= $nav.offset().top + $nav.height()) {
$('#fixedbar').fadeIn(250);
}
else {
$('#fixedbar').fadeOut(250);
}
Demo http://jsfiddle.net/EHhQE/1/
You need to fade out and fade in the navigation when the scroll reaches the bottom and the top of the navigation bar respectively.
var topOfDiv = $('#navigation').position().top;
var bottomOfDiv = $('#navigation').position().top+$('#navigation').outerHeight(true);
And fetched in your code:
$(document).ready(function(){
$('#navigation a, #fixedbar a').on('click', function(e) {
e.preventDefault();
});
$(window).on('scroll',function() {
var scrolltop = $(this).scrollTop();
var topOfDiv = $('#navigation').position().top;
var bottomOfDiv = $('#navigation').position().top+$('#navigation').outerHeight(true);
if(scrolltop >= bottomOfDiv) {
$('#fixedbar').fadeIn(250);
}
else if(scrolltop <= topOfDiv) {
$('#fixedbar').fadeOut(250);
}
});
});
$(document).ready(function ()
{
slider();
});
$(window).scroll(function ()
{
slider();
});
function slider()
{
if (document.body.scrollTop > 208)
$('#fixedMenu').fadeIn(0);
else
$('#fixedMenu').fadeOut(0);
}