This question already has answers here:
JQuery Position:Fixed 'NAVBAR' by scrolling the page
(2 answers)
Closed 6 years ago.
Hello I am new to JavaScript please can anyone tell me the JQuery for keeping the navigation bar fixed on top while I scroll down.
I am using the following code but i think some contents are missing
Code Snippet :
var fixmeTop = $('.fixme').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
$('.fixme').css({ position: 'fixed', top: '0', left: '0' });
}
else {
$('.fixme').css({ position: 'static' });
}
});
$( document ).ready(function() {
var fixmeTop = $('.fixme').offset().top;
$(window).scroll(function () {
var currentScroll = $(window).scrollTop();
if (currentScroll > fixmeTop) {
$('.fixme').css({position: 'fixed', top: '0', left: '0'});
} else {
$('.fixme').css({position: 'static'});
}
});
});
If you want it fixed all the time, use something like:
.class_name {
position: fixed;
}
If you want it fixed only when you scroll, but relative when you are at the top of the page, then use something like:
$('body').scroll(function(){
var $class_name = $('.class_name');
if($(this).scrollTop() >= $class_name.height()) {
$class_name.addClass('scrolled');
}
});
You can then use css to change the position based on the class on the element.
.class_name.scrolled {
position: fixed;
}
If you couple this will transition css, you will be able to animate it smoothly.
Related
I am having issues with sticky javascript function which allows fixed positioning of the div.
This is the function:
$(function(){ // document ready
if (!!$('.sticky').offset()) { // make sure ".sticky" element exists
var stickyTop = $('.sticky').offset().top; // returns number
$(window).scroll(function() { // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stickyTop < windowTop) {
$('.sticky').css({ position: 'fixed', width: 'inherit', top: 10 });
} else {
$('.sticky').css('position','static');
}
});
}
});
But I need that to happen only inside the parent div, not the whole page.
Here is the example:
http://www.astroprodavnica.com/59/izrada-i-tumacenje-natalne-karte.html
It is the div on the right.
Parent div should have position: relative or any other than static, which is used by default.
Then to position inside this parent, child should have position: absolute.
You can read more about positioning e.g. here.
while you use fixed position you need to use (relative parent position will not work with fixed child)
if (windowTop > stickyTop
&& windowTop < $('.right').offset().top + $('.right').outerHeight(true)) {
$('.sticky').css({ position: 'fixed', width: 'inherit', top: 10 });
}else if(windowTop < stickyTop ){
$('.sticky').css('position','static');
}else{
$('.sticky').css('position','absolute').css('bottom', '0px');
}
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've created a sticky bar to stay at the bottom of the window. As the user scrolls down to the bottom of the page the same bar will stay fixed until the footer shows, then removes its fixed position, temporarily, to stay above the footer until the user scrolls back up and it remains fixed again.
I only want to happen when the page is wider than 680px. Anything under that will keep the sticky bar in a default position (CSS: position:inherit).
This is the website: http://ttd.firefly-digital.co.uk
It works as expected. However, when I test on Chrome in Mac it triggers my CPU fan which suggests this not very efficient and with my limited JavaScript skills, wondered if there is a cleaner way to achieve this is?
This is the current js code:
$(window).scroll(function(event) {
var scroll = $(this).scrollTop();
var docHeight = $(document).height();
var windowHeight = $(window).height();
var footerHeight = $('.footer').height();
if(docHeight - (windowHeight + scroll) < footerHeight) {
$('.contact-bar').css({
bottom: footerHeight - (docHeight - (windowHeight + scroll))
});
} else {
$('.contact-bar').css({
bottom: 0
});
}
});
var windowWidth = $(window).width();
$(window).resize(function() {
windowWidth = $(window).width();
if(windowWidth > 680) {
$('.contact-bar').css({
position: "fixed"
});
} else {
$('.contact-bar').css({
position: "inherit"
});
}
});
CSS code
.contact-bar {
background: $contact-bar;
width: 100%;
height: 40px;
text-align: center;
position: fixed;
bottom: 0;
z-index: 10;
}
You can do it in reverse. Make it so that the bar, without position fixed, is above the footer without any JavaScript (incl. media queries). Than add a fixed class with position:fixed and bottom:0 that will be added accordingly. Like so:
.contact-bar.fixed { position:fixed; bottom:0; }
The jquery code that will trigger this, is as follows:
$(window).scroll(function (event) {
var windowTop = $(this).scrollTop();
if (windowTop >= $(".footer").offset().top) {
$(".contact-bar").addClass("fixed");
} else {
$(".contact-bar").removeClass("fixed");
}
});
Then add a few lines that the above code will only fire if the window width is > 680, either with jquery or pure javascript. For example with:
if ($(window).width() < 960) { // above function }
Do note I have not tested this, so please comment if it doesn't work. Credit: Preventing element from displaying on top of footer when using position:fixed
You better use classes to target your elements, at least to prevent jQuery from traversing the whole DOM using selectors appropriately which is good in performance.
As my title says, my sticky header is causing the subsequent div to jump about 100 pixels when the navbar reaches the top of the page. It's like the home div is magically losing 100 pixels of its height. I've tried a couple things but haven't been able to get this to work.
I have added plugins for smooth scrolling but couldn't get it to work in the jsfiddle. If you scroll down slowly when the navbar is getting to the top of the page, you will notice the skip.
Thanks for your help!
http://jsfiddle.net/g9N78/2/
here is the code I'm using for the sticky header:
<script>
function moveScroller() {
var move = function() {
var st = $(window).scrollTop();
var ot = $("#nav").offset().top;
var s = $(".nav");
if(st > ot) {
s.css({
position: "fixed",
top: "0",
background: "rgba(0,0,0,0.65)"
});
} else {
if(st <= ot) {
s.css({
position: "",
top: "",
background: "black"
});
}
}
};
$(window).scroll(move);
move();
}
</script>
<script type="text/javascript">
$(function() {
moveScroller();
});
</script>
Since you are removing that object from the DOM flow the space is available and the element under takes it, you can just add some margin to #home like this:
$('#home').css('marginTop','100px');
Check this Demo http://jsfiddle.net/g9N78/3/
Use the jQuery .height() method to find out the height of your nav bar, save it to a variable, then apply that height to the top margin of the page, to make it fill the space that the nav bar used to occupy.
$(".nav").height();
$('#home').css('marginTop', navHeight);
See the fiddle below...
http://jsfiddle.net/g9N78/8/
jQuery:
function moveScroller() {
var move = function() {
var st = $(window).scrollTop();
var ot = $("#nav").offset().top;
var s = $(".nav"),
navHeight = s.height();
if(st > ot) {
s.css({
position: "fixed",
top: "0",
background: "rgba(0,0,0,0.65)"
});
$('#home').css('marginTop', navHeight);
} else {
if(st <= ot) {
s.css({
position: "",
top: "",
background: "black"
});
}
$('#home').css('marginTop', '0');
}
};
$(window).scroll(move);
move();
}
There is no magic involved. As long as you do not reach the scroll-top, the header is position:static. The following div will be displayed under the Top. As soon as the element is set to position: fixed, you "lose" the height of the header, causig the optical jump.
I don't think you need Javascript for your header to be sticky.
Try removing the javascript and add this css:
body
{
padding-top: 90px;
}
.nav
{
position: fixed;
top: 0px;
height: 90px;
width: 100%;
}
Edit: Sorry I did not think about your Logo. So this will not work for you like that.
Good morning I am working on a sticky header for my site, I've got it working but it seems to snap into place, I want to be smooth! how do I go about this?
My site: http://www.trevorpeters.co.uk/tpwebdesign
CSS:
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
JS
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
By default the header is in your document flow, 'pushing' the rest of the content down. If you make it sticky, it doesn't push the rest of the document down making it snap upwards. You can fix this by making your banner sticky from the start and giving your content a top margin equal to the height of your header. This way you can just get rid of the javascript all together.