I have problems adding a class to the navigation after scrolling to get a fixed class. My website has a video in the background and only the <div> with the .wrap class can scroll all the content. When scrolling I would like the navigation to be fixed on top.
This is my Javascript code:
$(document).ready(function() {
var navpos = $('.navbar').offset();
console.log(navpos.top);
$(window).bind('scroll', function() {
if ($(window).scrollTop() > navpos.top) {
$('.navbar').fadeIn(500).addClass('fixed-top');
}else {
$('.navbar').removeClass('fixed-top');
}
});
});
But the problem is that the body is in fixed position and only the content wrap is actually scrolling. How do I fix this?
Bind the scroll to the wrapper
$(document).ready(function() {
var navpos = $('.navbar').offset();
console.log(navpos.top);
$(window).bind('scroll', function() {
if ($('.wrapper').scrollTop() > navpos.top) {
$('.navbar').fadeIn(500).addClass('fixed-top');
}else {
$('.navbar').removeClass('fixed-top');
}
});
});
Related
Here’s a demo page.
https://codyhouse.co/demo/full-screen-pop-out-navigation/index.html
How to hide the header when the screen is on the top of the page, and it will only show on scroll up
hi try following...
$(window).scroll(function() {
var _hideVal = 50; //You can change this value...
if ($(window).scrollTop() > _hideVal)
{
$('.header-holder').fadeIn();
}
else
{
$('.header-holder').fadeOut();
}
});
I've created a slider in the footer with shortcode (in a div id #oter) and I need to display none on load and display on onscroll.
Now I have this by plugin:
!function(e){e(document).ready(function(){var n=0;e(window).scroll(function(){var o=e(this).scrollTop();o>n?e("#oter").fadeOut(200):e("#oter").fadeIn(200),n=o})})}(jQuery);
Can I change to: hidden onload and display onscroll?
Can you help me?
Thanks!
I would hide this by default with CSS and then on scroll, add a new class which would then show it.
$(function() {
var footerslider = $("#oter");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
footerslider.addClass('show');
} else {
footerslider.removeClass("show");
}
});
});
UPDATE:
you are getting a console error... try updating the code to:
**please note that you will need to change the value inside the if statement so that the class gets added at the right scroll point.
jQuery(function($) {
var footerslider = $("#oter");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 10) {
footerslider.addClass('show');
} else {
footerslider.removeClass("show");
}
});
});
and add the following css to your stylesheet:
#oter {
display:none;
}
.show {
display:block !important;
}
I'm trying to use both jScrollPane -or any other functioning custom scrollbar plugin- and a sticky nav bar at the same time, but it simply doesn't work, no matter what I do.
JS FOR THE STICKY NAVBAR
var num = 200; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.navbar').addClass('fixed');
} else {
$('.navbar').removeClass('fixed');
}
});
JS FOR JSCROLLPANE
$(function()
{
$('#bodyID').jScrollPane();
});
Any suggestion ?
I have a nav bar that stays on top after scrolling, but if you hit the back button or a link like so ...com/index#downbelow the nav bar does not appear until you scroll.
How can I get the nav bar to show no matter what?
var num = 60;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menutop').addClass('fixed');
} else {
$('.menutop').removeClass('fixed');
}
});
jsfiddle
In url when there are # not triggered scroll events. therefore menu will not be fixed. Add this code to top of my-jquery.js
var ssss=$(document).scrollTop();
if(ssss>=60) $('.menutop').addClass('fixed');
If you want it to always be fixed just remove that JavaScript and add the fixed class in the HTML.
<nav class="menutop fixed">
You can run it once on DOM-ready, then bind to scroll:
var toggleMenuVisibility = function() {
var num = 60;
if ($(window).scrollTop() > num) {
$('.menutop').addClass('fixed');
} else {
$('.menutop').removeClass('fixed');
}
}
$(function() {
toggleMenuVisibility();
$(window).bind('scroll', toggleMenuVisibility)
})
I've encountered an issue with a sticky nav/banner image duo I'm trying to implement.
Check it out here: http://lucid-build.com/stack/sticky/
The issue is, when I resize the window, the position of the banner is off. Otherwise, it acts as it's supposed to.
Any suggestions on how to fix this would be greatly appreciated!
[edit] here's the script!
function resizeBanner() {
var bannerH = $(".banner img").height();
$(".banner").css("height", bannerH);
}
function fixedNav() {
var logoT = $(".logo").offset().top;
var bannerH = $(".banner img").height();
$(window).scroll(function() {
if($(window).scrollTop() > logoT ) {
$("#header").addClass("fixed").css(("height"),120);
$(".banner").css(("margin-top"),-bannerH+120);
$("body").css(("margin-top"),bannerH+18);
} else {
$("#header").removeClass("fixed").css(("height"),("auto"));
$(".banner").css(("margin-top"),0);
$("body").css(("margin-top"),0);
}
});
}
$(window).resize(function() {
resizeBanner();
});
$(window).load(function() {
resizeBanner();
fixedNav();
});
$(document).ready(function() {
resizeBanner();
});
You just have to add to your element's css that has the class "banner" :
position : absolute;
bottom : 0;
PS : actually your box is resizing right but it set in the top left by default of the header that you set. As the parent box is set on position : relative, all the absolute element in will refer to that parent and not to the full document.