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);
}
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'm trying to have a submenu stay at the top of the page while scrolling once it reaches the top during scrolling. Here is what I have so far:
$(window).scroll(function () {
if ($(window).scrollTop() > 175) {
$('#location_menu').css('position', 'fixed').css('top','0px').css('z-index','1000');
$('.first').css('padding-top','415');}
else {
$('#location_menu').css('position', 'relative').css('z-index','1');
}});
The issue I'm having is that the scroll is not smooth and once the element changes from position:relative to position:fixed the content seems to jump/skip up about 415px which is the same height as the submenu.
Here is the css:
<div id="location_menu" >submenu content
</div>
<div id="content" class="location_detail first">content beneath submenu
</div>
I've added the line for .first to have a padding-top of 415px when the page is crolling and reaches within 175px of the top of the page .css('padding-top','415') this doesn't actually seem to be doing anything though. There is no change, so I assume I have executed it incorrectly.
Should I use a different scrolling function then I have listed above?
Here is what I ended up using to fix my problem, based off the code from #Danko :
$(window).scroll(function () {
var $conten = $('.first'),
$menu = $('#location_menu')
scrollpos = $(window).scrollTop();
if (scrollpos >= 175) {
$conten.css('padding-top','365px');
$menu.css('position', 'fixed').css('top','0px').css('z-index','1000');
} else {
$conten.css('padding-top','0');
$menu.css('position', 'fixed').css('position', 'relative').css('z-index','1');
}
});
Edit
Ok now that i understand the question, i did this demo http://codepen.io/anon/pen/BdkLf.
The function in fact is this:
$(window).scroll(function () {
var $menu = $('#location_menu'),
$conten = $('#content'),
scrollpos = $(window).scrollTop();
if (scrollpos >= 175) {
$menu.css( {
"top" : "0",
"position": "fixed",
});
$conten.css('top','375px' );
} else {
$menu.css( {
"position": "relative",
"top" : "175px",
});
$conten.css('top','175px');
}
});
Here 175 is equals to the initial distance from the top and 375 is the addition between the distance and the height of your menu
I'm trying to create a sticky navigation menu that will be positioned right underneath a banner and when you scroll down and the banner cannot be seen anymore the navigation menu will be fixed at the top of the browser chrome. Here's what I have so far: http://tinyurl.com/bper44a
The CSS is straight forward, the issue may be with my JS:
$(document).ready(function() {
var s = $(".navMenu");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("fixedTop"); }
else {
s.removeClass("fixedTop");
}
});
});
While it works exactly the way on want it in Firefox, I can figure out why it behaves differently in Chrome and Safari (gets into fixed position as soon as you scroll down just a little bit).
Any insight?
Not sure why it works in firefox, but I think the following will work for all browsers:
$(document).ready(function() {
var s = $(".navMenu");
var banner = $("header > img");
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
// if the scroll position is greater than the height of the banner
// fix the navigation.
if (windowpos >= banner.outerHeight()) {
s.addClass("fixedTop"); }
else {
s.removeClass("fixedTop");
}
});
});
Obligatory fiddle here.
I'm designing a nav that has the background bar appear after the user has scrolled down the page a bit. When they scroll back to the top, the bar (background color) disappears. I'm doing it using the instructions over at:
Add/remove class with jquery based on vertical scroll?
It works fine but now I would like to add fading in and out of the bar on scroll. I've tried adding the fadeIn() and fadeOut() methods. Problem is when it fades out, it fades out the whole #nav div! Not just the background colour. Here's the query
$(function() {
//caches a jQuery object containing the header element
var header = $('.noBackground');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
header.removeClass('noBackground').addClass('blackBackground').fadeIn();
} else {
header.removeClass('blackBackground').fadeOut().addClass('noBackground');
}
});
});
Full, HTML, CSS and jQuery on this fiddle
The problem here is your #nav div is hidden when you scroll back to top. It is because the .fadeOut() method hides the matched elements by fading them to transparent. So you you remove .fadeOut() from else condition and it works fine.
Here is the edited code.
$(function() {
//caches a jQuery object containing the header element
var header = $('.noBackground');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
header.removeClass('noBackground').addClass('blackBackground').fadeIn();
} else {
header.removeClass('blackBackground').addClass('noBackground');
}
});
});
Edit:
A simple twist will show the effect:
$(function() {
//caches a jQuery object containing the header element
var header = $('.noBackground');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
if(header.hasClass('noBackground')) {
header.hide();
header.removeClass('noBackground')
.addClass('blackBackground').fadeIn(2000);
}
} else {
if(header.hasClass('blackBackground')) {
header.hide();
header.removeClass('blackBackground')
.addClass('noBackground').fadeIn(2000);
}
}
});
});
Demo Fiddle.
fadeOut() method can be implemented on a jquery element,not on a class..your code is working perfectly fine