How do I make a nav bar that on page loading is present at, say, 50px from the top? As I scroll down, it doesn't move but when I cross it, it behaves similar to a fixed-top nav bar in Bootstrap.
It would be really helpful if you used Bootstrap.
Thanks in advance for your answers.
Use this simple jquery script:
$(window).scroll(function () {
var height = $('body').height();
var scrollTop = $(window).scrollTop();
if(scrollTop>50){
$('#navbar').css({ 'position': 'fixed', 'top' : '0', 'opacity': '0.5'});
} else {
$('#navbar').css({ 'position': 'absolute', 'top': '50px', 'opacity': '1'});
}
});
and here is the JSFiddle example
Here is a jquery script built to work with bootstrap, and that swaps in navbar-fixed-top at 50px scroll.
Example Bootply
$(window).scroll(function () {
var height = $('body').height();
var scrollTop = $(window).scrollTop();
if(scrollTop>50){
$(".navbar-default").addClass("navbar-fixed-top");
} else {
$(".navbar-default").removeClass("navbar-fixed-top");
}
});
Related
I have a menu that gets fixed when you scroll to a certain position. However I need it to return to it's regular position and become unfixed when it scrolls past the content it is supporting.
So I need to calculate the height of the content container div and once it get to the end, unfix the menu.
This is because if I keep scrolling to the bottom of the page my menu keeps staying fixed even when iv'e scrolled onto my footer.
So how can I change this so that the scroll is only fixed to the height of the div that the fixed menu is supporting #js-contracts.
$(function(){
function fixDiv() {
var $cache = $('#js-contracts');
var divHeight = $('#js-months').height();
if ($(window).scrollTop() > 1210 & $(window).scrollTop() < divHeight+1210)
$cache.css({
'position': 'fixed',
'top': '63px',
'width':'inherit',
'padding-top':'10px',
'padding-bottom':'10px',
'background-color':'white'
});
else
$cache.css({
'position': 'relative',
'top': 'auto',
'background-color':'none',
'padding-bottom':'10px',
});
}
$(window).scroll(fixDiv);
fixDiv();
});
So I am using this code to perform tasks when the user scrolls:
function myFunction(){
var position = $(window).scrollTop();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll > position) {
// scrolling downwards
hypeDocument.showSceneNamed('Section 2', hypeDocument.kSceneTransitionCrossfade, 1.1);
}
position = scroll;
});
return false;
}
But I would like to prevent down scrolling on one page. Is there anyway I can do this whilst allowing the scroll on the other pages? I tried using $(window).off("scroll"); but that blocks scrolling in both directions.
This will completely disable scrolling:
$('html, body').css({
'overflow': 'hidden',
'height': '100%'
});
To restore:
$('html, body').css({
'overflow': 'auto',
'height': 'auto'
});
If you only wish to prevent scrolling in the vertical direction (up and down), you can set the scroll in that direction to hidden:
overflow-y: hidden
You could trigger that effect with jQuery using:
$('body').css('overflow-y','hidden');
I am trying to create a page that the text scrolls while the image remains fixed beside it, but only when the page reaches a certain point (scroll and fix content). So far, the javascript I am using is:
$(window).scroll(function () {
var height = $('body').height();
var scrollTop = $(window).scrollTop();
if (scrollTop > 519) {
$('#leonardo').css({ 'position': 'fixed', 'top' : '74px' });
} else {
$('#leonardo').css({ 'position': 'relative', 'top': '519px'});
}
});
$(document).ready(function () {
$(".container").animate({
marginTop: "0"
},2000);
});
CSS rules for the image I want to freeze are:
#leonardo {
background-image:url(Images/Leonardo-Robot3%20Resized.png);
background-repeat:no-repeat;
width:300px;
height:527px;
float:left;
}
If possible, I want the image to change when each new header of the text is reached, like this example
(http://pitchfork.com/features/cover-story/reader/bat-for-lashes/)
I want to fix the position of navigation at the top when the navigation position and scroll position are equal.
Please let me know how can I get the position of navigation and page scroll position? I want something like this: http://new.livestream.com/live-video-tools
I've tried:
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('#main-heading').offset().top;
// our function that decides weather the navigation bar should have "fixed" cs s position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the navigation, change its position to fixed to stick to top,
// otherwise change it back to relative
if(scroll_top > sticky_navigation_offset_top) {
$('#fixed_nav').css({ 'position': 'fixed', 'top':6, 'left':0, 'width':'100%', 'z-index':999, 'height':80, 'background':'#fff' });
} else {
$('#fixed_nav').css({ 'position': '','overflow': 'visible', 'display':'block','height':80});
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
This is old, but deserves an answer for Googlers' benefit.
See Fiddle here.
$(function () {
var offset = $('#nav').offset().top;
var nav = function () {
var scroll = $(window).scrollTop();
if (scroll < offset) {
$('#nav').css({ 'position': 'relative' });
}
else {
$('#nav').css({ 'position': 'fixed', 'top': 0 });
}
};
nav();
$(window).scroll(function () {
nav(); //this ensures we check again every time the user scrolls
});
});
OP - you probably figured it out by now, but I'm not sure why you were checking the offset of #main-heading and then setting the position of a different #fixed-nav, that's probably where you're issue was.
I'm looking for a way to position the #header element of my page as "Fixed" only after having scrolled downward for about 170 pixels.
Above the header is a banner, so when people scroll down, I would like the banner to scroll away, the header to stay fixed when it hits the top of the window, and the page content to scroll underneath the header.
http://jsfiddle.net/tdskate/zEDMv/
This is the general idea although you may want to fudge around with the css a bit.
var header = $("#header");
$(document).scroll(function(e) {
if($(this).scrollTop() > $("#banner").height()) {
header.css({"position" : "fixed", "top" : "0"});
} else {
header.css("position", "relative");
}
});
You need to check for the different scroll positions:
var $header = $('#header'),
headerPos = $header.position().top,
$win = $(window);
$win.scroll(function() {
if ( $win.scrollTop() >= headerPos) {
$header.css({
'position':'fixed',
'top':0,
'width': '100%'
});
}
if ( $win.scrollTop() <= headerPos ) {
$header.css({
'position': 'static'
});
}
});
http://jsfiddle.net/DOSBeats/zEDMv/10/
Here's a slightly more concise version:
var header = $('#header'),
bannerHeight = $('#banner').height(),
win = $(window);
win.scroll(function() {
header.css({ top: Math.max(Number(win.scrollTop() - bannerHeight), 0) });
});
Here is a demo of a jquery plugin that takes care of this. Similar to John's answer above, but the plugin takes the solution a bit farther.
Demo: http://jsfiddle.net/ZczEt/
Plugin and source: https://github.com/bigspotteddog/ScrollToFixed
Usage:
$(document).ready(function() {
$('.header').scrollToFixed();
});
I think this should work: http://jsfiddle.net/Skooljester/K2mFT/. However, you'll need to define a width on your header or else it'll shrink when it becomes fixed.