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();
});
});
Related
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 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.
On initial page load, I need the header image height to be calculated, and then push the main section below it. (The header is fixed and without this, main would display at the top of the page). In Chrome, there's no issue, everything works fine. In Safari and Firefox, main displays 20px from the top of the browser, which is the margin of main.
JS:
var headerHeight = $('#head-image').height();
function pageSetup(elementHeight) {
var main = $('main');
var headerHeightPx = elementHeight +'px';
main.css({'paddingTop': headerHeightPx});
}
$(window).on('load', function() {
pageSetup(headerHeight);
});
HTML:
<header>
...
<div class='foo'>
<img src='image.jpg' id='head-image'>
</div>
<header>
<main>
...
</main>
CSS:
#head-image {
position: fixed;
z-index: 1;
}
main {
margin: 1.5em 0;
position: relative;
z-index: 2;
}
How do I make #headnav stick to the top when the page's scroll position reaches the top, then unstick when it would be returned to its original position?
P.S. The repeated "CONTENT" in the code is to simulate scrolling. It is not a spam
jsFiddle
<h1>I AM A HEADER</h1>
<div id="headnav"></div>
<pre><h1>
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
</h1></pre>
body {
margin:0
}
#headnav {
height: 75px;
width: 100%;
background-color: black;
}
This is a very simple thing to do.
Find out what the original position of the header is, then attach a scroll handler to the body which checks the scroll position against the original position of the div.
If the scroll position is greater than the original position, add position: fixed
If the scroll position is less than the original position, remove position: fixed
(Demo)
var headnav = document.getElementById('headnav');
var headnavPos = headnav.offsetTop;
window.onscroll = function() {
if(document.body.scrollTop > headnavPos) {
if(headnav.style.position !== 'fixed') {
headnav.style.position = 'fixed';
}
} else {
if(headnav.style.position === 'fixed') {
headnav.style.position = '';
}
}
}
Just give position: fixed to h1:
h1 {position: fixed; top: 0;}
Fiddle: http://jsfiddle.net/5z4paLgr/1/
i am not sure that understand u correctly but may be this help you
Fiddle http://jsfiddle.net/jg4kdfqs/1/
JavaScript
$(document).ready(function(){
var HeaderTop = $('#header').offset().top;
var hh =HeaderTop + 300;
$(window).scroll(function(){
if( $(window).scrollTop() > HeaderTop ) {
if($(window).scrollTop() > hh) {
$('#header').css({position: 'fixed', top: '0px', background:'#000'});
} else{
$('#header').css({position: 'fixed', top: '0px'});
}
} else {
$('#header').css({position: 'static',background:'red'});
}
});
});
HTML
<div id="header">
nav
</div>
Similar to tarasikgoga but purely javascript:
Fiddle http://jsfiddle.net/5z4paLgr/3/
Javascript
var attached = false;
window.onscroll = function (e) {
if(!attached && window.scrollY > 150){
attached = true;
document.getElementById("headnav").classList.add('fixed-top');
document.getElementById("content").classList.add('content-margin-top');
}
if(attached && window.scrollY < 150){
attached = false;
document.getElementById("headnav").classList.remove('fixed-top');
document.getElementById("content").classList.remove('content-margin-top');
}
}
CSS
body {
margin:0
}
h1{
height: 150px;
margin: 0;
}
#headnav {
height: 75px;
width: 100%;
background-color: black;
}
#headnav.fixed-top{
position: fixed;
top: 0;
}
.content-margin-top{
margin-top: 75px;
}
HTML
Just add id="content" to your content div
Adjust with yours heights (here you have 150px for header and 75px for menu)
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.