Nav not fixed at top of page after scroll? - javascript

I am trying to get a script to work which will fix the nav element at the top of the page when you scroll down the page to the nav tag. However what it is doing now is that is starts fixing at the top of the page only when your have scrolled down half of the page well past the nav tag? You can view the page in question here
Script
<script>
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 25;
if ($(window).scrollTop() > navHeight) {
$('nav').addClass('fixed');
}
else {
$('nav').removeClass('fixed');
}
});
});
</script>
HTML
<nav id="nav_desktop">
<ul>
<li>Home</li>
<li>Downtown Tour</li>
<li>Growth Tour</li>
<li>Landmarks Tour</li>
<li>Contact</li>
</ul>
CSS
.fixed {
position: fixed;
top: 0;
height: 25px;
z-index: 1;
}


var navHeight = $(window).height() - 25;
This line won't fix your nav to the top as you would expect. It just gets the window height and subtracts it by 25.
You first need to get the offsetTop value of the nav bar to check if the scrollTop value of the window reaches the offsetTop of the nav bar.
<script>
$(document).ready(function(){
var navTop = $('.nav').position().top; // returns and assigns the offset top of the nav bar
$(window).bind('scroll', function() {
if($(window).scrollTop() >= navTop) { // condition met if the scroll top value is greater than or equal to the offset top of the nav bar
$('nav').addClass('fixed');
}
else if($(window).scrollTop() < navTop) { //condition met if the scroll top value is only lower than the offset top of the nav bar
$('nav').removeClass('fixed');
}
});
});
</script>
I hope it helps!


You can see that the navbar in your site is fixing if you scroll down at the bottom of the page. so if you want it to be fixed once the navbar scrolls out of viewport you can try the following code:
<script>
$(document).ready(function(){
var navHeight = $( 'nav' ).offset().top;
$(window).bind('scroll', function() {
if ($(window).scrollTop() > navHeight) {
$('nav').addClass('fixed');
}
else {
$('nav').removeClass('fixed');
}
});
});
</script>
The $('nav').offset().top; gets the top position of the navbar with respect to the document's top position. So once you scroll more than that value, the fixed class is added to it.
Also I would recommend you to change some css property of fixed class. you should keep it as follows:
.fixed {
position: fixed;
top: 0;
width: 88%;
height: 25px;
z-index: 1;
}
You have to set width(88% in your navbar's case) to the fixed positioned elements as position:fixed takes the width according to the content of the div and not the full width.

Related

scroll div over a fixed div

My question is how can I overlap a div over a fixed div on scroll without using a background image.
I want the bottom of the div to match the bottom of the screen to fix that div and make the content (the other divs) below to scroll up (like a parallax effect). Same with if the fixed div is bigger than the screen, as in bigger height (so position sticky won't work).
Here is what I've got so far. I checked if the user scrolled to the div, that I want the scroll effect at and fixed at the bottom. When I'm at that point the content acts like the fixed div doesn't exist and skips it abruptly instead of scrolling in from below. The effect works though when I scroll back up it just skips the fixed div.
I'm trying to achieve something like this:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_parallax_percent
But without a background image.
.background-beige {
width: 100%;
background-color: #f8f8f8;
padding-bottom: 200px !important;
}
.contact-banner-wrapper {
height: 436px;
background-color: #c22a40;
position: relative;
}
$(window).scroll(function (e) {
var el = $(".contact-banner-wrapper");
var elem = $(".background-beige");
if (
$(window).scrollTop() >=
elem.offset().top + elem.outerHeight() - window.innerHeight
) {
elem.css({ position: "fixed", bottom: "0px"});
}
if ($(this).scrollTop() < 200) {
elem.css({ position: "static"});
console.log("reset");
}
});
Do you have improvements or any other solutions?

I did a work around, to my problem and now it works as intended. position: fixed; takes the div out of the flow of the DOM so it gets ignored and skipped by the other divs. I just gave the content (the other divs that scroll from below over the fixed div a top margin of the height of the fixed div to work around the position: fixed; change.
$(window).scroll(function (e) {
var scrollOverContent = $(".contact-banner-wrapper");
var fixedDiv = $(".contact-banner-wrapper").prev();
var heightFixedDiv = fixedDiv.outerHeight();
if (
$(window).scrollTop() >=
fixedDiv.offset().top + fixedDiv.outerHeight() - window.innerHeight
) {
fixedDiv.css({ position: "fixed", bottom: "0px", zIndex: "0" });
scrollOverContent.css("margin-top", heightFixedDiv);
}
if (
$(window).scrollTop() <
scrollOverContent.offset().top - $(window).height()
) {
fixedDiv.css({ position: "static" });
scrollOverContent.css({ marginTop: "0" });
}
});

I want a div to scroll at the bottom of the page when the user scrolls

I can't use bootstrap for this i can use jquery
I have basic page with a container which has a button and some paragraph
I want to move this at the bottom on the page when the user scrolls
Also this should only happen in a mobile view.
example: https://creditcards.chase.com/a1/marriottpremier/8TK?CELL=679Z&nck=120931994&ck=1213078&lk=1000160171
They used bootstrap
<div>
<h2>Near<h2>
<div>
<button>Learn more<button>
<p>conditions<p>
<div>

I have used jquery and media queries for this to work.
CSS
#media only screen and (max-width: 380px) {
.fixed {
bottom: 0;
position: fixed;
left: 0;
width: 100%;
max-width: 374px;
margin: 0 auto;
background-color: blue;
height: 70px;
}
}
JQuery
<script>
jQuery(document).ready(function() {
// define variables
var navOffset, scrollPos = 0;
// add utility wrapper elements for positioning
jQuery("nav").wrap('<div class="button1"></div>');
jQuery("nav").wrapInner('<div class="inner"></div>');
jQuery(".nav-inner").wrapInner('<div class="inner-most"></div>');
// function to run on page load and window resize
function stickyUtility() {
// only update navOffset if it is not currently using fixed position
if (!jQuery("nav").hasClass("fixed")) {
navOffset = jQuery("nav").offset().top;
}
// apply matching height to nav wrapper div to avoid awkward content jumps
jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());
} // end stickyUtility function
// run on page load
stickyUtility();
// run on window resize
jQuery(window).resize(function() {
stickyUtility();
});
// run on scroll event
jQuery(window).scroll(function() {
scrollPos = jQuery(window).scrollTop();
if (scrollPos >= navOffset) {
jQuery("nav").addClass("fixed");
} else {
jQuery("nav").removeClass("fixed");
}
});
});
</script>

Move sticky block from one to another place

I have sticky block on my page. It sticks to the bottom of the page, when the bottom of the viewport reaches its top. And the block must stop to be sticky before footer (when the bottom of block reaches the top of footer) and stay before footer.
The problem is in inserting block before footer: nothing happens when buttons reach footer. Why does it happen?
HTML
<header>
<div class="block"></div>
</header>
<main></main>
<footer></footer>
CSS
header {
position: relative;
}
.block {
position: absolute;
bottom: 10px;
}
.block-fixed {
position: fixed;
bottom: 0;
}
JS
$(function() {
var blockPrimaryPosition = $(".block").offset().top;
function makeSticky() {
var block = $(".block");
var blockHeight = block.offset().top + 75; // coordinate of the bottom side of the block at any time
var totalHeight = $(window).scrollTop() + $(window).height(); // coordinate of the bottom of the viewport relative to the document
if (totalHeight >= blockPrimaryPosition) {
block.addClass("block-fixed");
} else if (buttonsHeight >= $("footer").offset().top) {
$("footer").before(block);
block.removeClass("block-fixed");
} else {
block.removeClass("block-fixed");
};
};
$(window).scroll(function() {
makeSticky();
});
});

"Sticky" side bar - setting bottom margin

I have a "sticky" sidebar contact form with jQuery, which turns to fixed-positioned div when page is scrolled down. My problem is that it overlaps the footer when scrolled down all the way. Is there a way where I could set it not to scroll down any further once its bottom margin starts hitting the footer? I'm not sure how I would detect that event, if at all possible, because it's a responsive site and footer's height varies.
CSS:
.sticky {
margin-top: 38px;
max-width: 300px;
padding-top: 20px;
z-index: 0;
}
jQuery:
jQuery(function(){ // document ready
if (!!jQuery('.sticky').offset()) { // make sure ".sticky" element exists
var stickyTop = jQuery('.sticky').offset().top; // returns number
jQuery(window).scroll(function(){ // scroll event
var windowTop = jQuery(window).scrollTop(); // returns number
if (stickyTop < windowTop){
jQuery('.sticky').css({ position: 'fixed', top: 0 });
}
else {
jQuery('.sticky').css('position','static');
}
});
}
Thanks all in advance.

jQuery sticky header jumps at specific height

I'm trying to create a basic sticky header.
The header contains 2 parts: top and main. When page is scrolled down, i want to keep only the .main sticky (so that the .top becomes invisible).
I'm trying following code, but it is jerky and if the content has a specific height, it does not let scroll, starts jumping. I have captured video to illustrate the problem. Please see:
http://www.screenr.com/Z89H
Here's the demo:
http://jsfiddle.net/M33g4/
(you might not see the issue because of different screen height, in that case drag the results window to set its height about 535px).
HTML:
<header>
<div class="top"></div>
<div class="main"></div>
</header>
<section>
</section>
jQuery:
$(window).scroll(function () {
var height = $('header').outerHeight();
if($(this).scrollTop() > height){
$('header').addClass('sticky');
}else{
$('header').removeClass('sticky');
}
});

I'm sure you will have fixed this by now but after encountering the same issue I came up with a solution:
The issue was caused by the document size not having enough leeway beneath the fold to fit the height of the overall header. This meant that if a visitor tried to scroll down, the sticky part of the header will become fixed, but immediately unfix itself.I believe it may be the bounce-back effect that causes the problem but I haven't tested to verify this.
In short, I fixed it by adding simple check to ensure that there is more than enough space beneath the fold by comparing the height of the body and the height of the window. i.e body height minus window height must be greater than the total header height. Here's the code that worked in my instance:
// Sticky sub navbar
var sub_nav_height = $('#sub-nav').outerHeight();
var total_height = $('#main-head').outerHeight();
var header_height = total_height - sub_nav_height;
var content_height;
var y;
$(window).scroll(function() {
// Only make sticky if window is large enough not to cause jumping issue
content_height = $('body').height() - $(window).height();
if(content_height > total_height) {
y = $(this).scrollTop();
if($(this).scrollTop() > header_height) {
$('#sub-nav').addClass('fixed');
} else {
$('#sub-nav').removeClass('fixed');
}
}
});
There are two caveats which I decided were absolutely fine for my scenario. The first is that an extra calculation has been added every time the scroll event is triggered, but this hasn't caused me any performance issues. The second is that the sticky header functionality is simply disabled when a vistor's window is a problematic size, but again I had no qualms with this as the navbar could still just about be seen.

Check this
http://jsfiddle.net/M33g4/3/
JS
$(window).scroll(function () {
var height = $('.top').height();
if($(this).scrollTop() > height){
$('.top').hide();
$('header').addClass('sticky');
}else{
$('.top').show();
$('header').removeClass('sticky');
}
});
CSS
*{
margin: 0;
padding: 0;
}
header{
width: 100%;
}
.top{
height: 50px;
background: blue;
}
.main{
height: 70px;
background: green;
}
section{
height: 560px;
background: yellow;
}
.sticky{
position: fixed;
width: 100%;
}

You should target to the top but not to whole header demo
$(window).scroll(function () {
var height = $('header .top').outerHeight();
if($(this).scrollTop() > height){
$('header').addClass('sticky');
}else{
$('header').removeClass('sticky');
}
});

http://jsfiddle.net/M33g4/1/
$(window).scroll(function () {
var height = $('.top').outerHeight();
if($(this).scrollTop() > height){
$('header').addClass('sticky');
}else{
$('header').removeClass('sticky');
}
});
guess you got the wrong height.
Updated:
The blinking issue is caused by height changing (due to position: fixed)
check this one: http://jsfiddle.net/M33g4/6/
$(window).scroll(function () {
var height = $('.top').outerHeight();
if($(this).scrollTop() > height){
if($('.main.sticky').length == 0) {
$('header').append(
$('.main').clone().addClass('sticky'));
}
}else{
$('.main.sticky').remove();
}
});
and stick .main only:
.sticky{
position: fixed;
width: 100%;
top: 0;
}

This works for me:
Set the height variable to 30:
$(window).scroll(function () {
var height = 30;
if($(this).scrollTop() >= height){
$('header').addClass('sticky');
}else{
$('header').removeClass('sticky');
}
});
and change the css for the sticky class to the following:
.sticky{
position: fixed;
width: 100%;
top: -30px;
left: 0;
}
Top is -30 instead of -40. Works for me!

Check how the content in this demo snaps to the top, under the header, but not visible. You might want to resize the Results window to about 500px. Is there a solution to this please?
$(window).scroll(function () {
var height = $('.top').outerHeight();
if($(this).scrollTop() > height){
$('header').addClass('sticky');
}else{
$('header').removeClass('sticky');
}
});

Categories