I need to freeze the footer panel when it's parent div reaches the bottom of the browser.
What I have tried is to make it to freeze when I scroll the page but I need it when the parent parent div reaches the bottom of the browser.
For example in my demo there is a content panel which is hidden. If you click on expand link you get to see the expanded content.
When this content expands the bottom_content div moves to the bottom, I need the footer div in it to stick to the bottom as soon as bottom_content is pushed down.
Here is my code currently used
var stickyHeaderbottom = $('.footer').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderbottom) {
$('.footer').css({ position: 'fixed', bottom: '0px', width: '95%', left: '2.5%' });
} else {
$('.footer').css({ position: 'static', bottom: '0px', width: '100%' });
}
});
DEMO
**Hope this is what ur trying to achieve...DEMO
$('.expandble_conetnt a').click(function(event){
event.preventDefault();
$(this).next('span').slideToggle();
});
//this is for stick to the bottom
var stickyHeaderbottom = $('.footer').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderbottom) {
$('.footer').css({ position: 'fixed', bottom:0, width: '95%', left: '2.5%' });
} else {
$('.footer').css({ position: 'static', bottom: $('.expandble_conetnt').offset().top, width: '100%' });
}
});
Related
Good day everyone. I am trying to switch my div into a fixed one at the bottom when it appears on screen when both scrolling up and down.
I found this stack overflow topic which does the thing I'm attepting to do but at top HERE.
Code:
var fixmeTop = $('.fixme').offset().top; // get initial position of the element
$(window).scroll(function() { // assign scroll event listener
var currentScroll = $(window).scrollTop(); // get current position
if (currentScroll >= fixmeTop) { // apply position: fixed if you
$('.fixme').css({ // scroll to that element or below it
position: 'fixed',
top: '0',
left: '0'
});
} else { // apply position: static
$('.fixme').css({ // if you scroll above it
position: 'static'
});
}
});
After many try and many articles red, I just can't manage to tweak it to be fixed at the bottom (kind of new to javascript). So I am please asking for your help.
Hey you can do it like this
const heightOfText = 15
if (currentScroll >= fixmeTop - $(window).height() + heightOfText) {
$('.fixme').css({
position: 'fixed',
bottom: '0',
left: '0'
});
}
So when you see your .fixme at the bottom of the text it attaches to the bottom with bottom: '0'. Let me know if it helps.
You could use position: sticky
/*QuickReset*/ *{margin:0;box-sizing:border-box;}
.content {
min-height: 200vh;
border: 4px dashed #000;
}
.sticky-bottom {
position: sticky;
bottom: 0;
padding: 2em 0;
background: #0bf;
}
<div>
<div class="content">
1. Lorem ut florem...
</div>
</div>
<div>
<div class="content">
2. Lorem ut florem...
</div>
<div class="sticky-bottom">Stick me when in viewport</div>
</div>
So i hope my question is clear enought ! I have a div at the top of my page and i'd like that div to move at the bottom when i scroll and hit the end of the page, well i think you get the idea !
If anyone as an idea, i'm taking it ;)
Try to use scroll event with animate() method, and use a flag scroll to make sure the div will be moved just one time :
var scroll = true;
$(document).on('scroll', function(){
var my_div = $("#my-div");
if(scroll){
scroll=false;
my_div.animate({
top : $('body').height() - my_div.offset().top - my_div.outerHeight(),
}, 1000);
}
})
Hope that will give you an idea.
var scroll = true;
$(document).on('scroll', function(){
var my_div = $("#my-div");
if(scroll){
scroll=false;
my_div.animate({
top : $('body').height() - my_div.offset().top - my_div.outerHeight(),
}, 1000);
}
})
html, body { height: 500px; }
#my-div {
position: absolute;
top: 0;
left: 0;
width: 90%;
height: 100px;
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my-div"></div>
You can detect when user scroll to the bottom of the page and then transition top property from 0 to the height of the window minus height of that element.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$('div').css({
top: $(window).height() - $('div').height()
});
}
});
CODEPEN
I've looked at this article and followed the top answer but I can't get it to work for me.
HTML
<div id="project">
<div class="details">
<p>Lorem Ipsum>
</div>
<div class="process">
<div class="col-6 fixme">Content</div>
<div class="col-6">Content</div>
</div>
</div>
CSS
#project {
position:fixed;
left:0;
width:100%;
height:100%;
top:100%;
}
body.projectLoaded #project {
opacity:1;
top:0;
}
Javascript
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'
});
}
});
I've a better understanding of the issue and why I got it working in a fiddle but not here. When on the homepage, if I'm scrolling down, after x height it becomes fixed. Once .projectLoaded is on body a fixed div #project is present, in the fixed div I'm trying to make it so when you scroll to .fixme it also becomes fixed, but it doesn't detect that you're at the right point in the scroll for the div to become fixed.
Is something like $(window, "#project-container").scroll(function() realistic?
Also, this is sort of a side question, but if it becomes fixed, how can I contain it in a relative div? Would it look like this?
HTML
<div class="container">
<div class="parent">
<div class="child"></div>
</div>
</div>
CSS
.container { position:relative; width:1280px; }
.parent { position:absolute; }
.child { position:fixed; width:960px; }
Would this be the best approach? What I want to achieve is when you look at this page, I'd like the .fixme div to follow the user as you scroll down.
Do this with jQuery
function fixDiv() {
var $div = $(".fixme");
if ($(window).scrollTop() > $div.data("top")) {
$div.css({'position': 'fixed', 'top': '0', 'width': '100%'});
}
else {
$div.css({'position': 'static', 'top': 'auto', 'width': '100%'});
}
}
$('.fixme').data("top", $('.fixme').offset().top); // set original position on load
$(window).scroll(fixDiv);
jsFiddle
jQuery:
$(document).ready(() => { //makes sure document is loaded
var fixmeTop = $('.yourdiv').offset().top; //gets the initial position of element
$(window).scroll(function() { //scroll event listener
var currentScroll = $(window).scrollTop(); //applies position, and makes it fixed when you scroll to it or below ↓
if (currentScroll >= fixmeTop) {
$('.yourdiv').css({
position: 'fixed',
top: '0',
left: '0'
});
} else {
$('.yourdiv').css({ //sets position to static if you scroll above it ↑
position: 'static'
});
}
});
});
I'm using this demo my project.
http://tympanus.net/Development/ArticleIntroEffects/index3.html
I want to do fixed menu after scrolling. And I use this js but it doesn't work.
function fixDiv() {
var $cache = $('#codrops-demos');
if ($(window).scrollTop() > 100)
$cache.css({'position': 'fixed', 'top': '10px', 'display': 'block'});
else
$cache.css({'position': 'relative', 'top': 'auto', 'display': 'none'});
}
$(window).scroll(fixDiv);
fixDiv();
How can i make ?
codrops-demos is a class, not an id, so you should use .codrops-demos rather than #codrops-demos.
Not sure that will be enough, though.
Is this what you are looking for?
http://jsfiddle.net/Pa36p/5/
JQuery (JS)
function fixDiv() {
var $cache = $('#codrops-demos');
if ($(window).scrollTop() > 100) $cache.css({
'position': 'fixed',
'top': '10px',
'display': 'block'
});
else $cache.css({
'position': 'relative',
'top': '110px'
});
}
$(window).scroll(fixDiv);
fixDiv();
You defined the display of the menu to none when the window scroll is less than 100px. So, the menu doesn't show up. If you are trying to do something like in the Codrops example, you should only fix the menu when the scrolling is bigger than the distance between the menu and the top of the screen.
Cleaning your code
Here is a simpler and more readable version of the code you did, leveraging the browser's javascript processing by using CSS.
http://jsfiddle.net/Pa36p/8/
JQuery (JS)
function fixDiv() {
var $cache = $('#codrops-demos');
if ($(window).scrollTop() > 100)
$cache.removeClass('relative').addClass('fixed');
else
$cache.removeClass('fixed').addClass('relative');
}
$(window).scroll(fixDiv);
fixDiv();
CSS
.fixed{
position: fixed;
top: 10px;
}
.relative{
position: relative;
top: 110px;
}
I'm using a js on my website (with wordpress) to get a stick to top menu when scrolling my page.
it works, when scrolling my header sticks on top, but there's a gap in my #entry content.
like on this example :
http://www.amsbooking.fr/mattieumoreau/artists/amine_edge_and_dance/
when scrolling and when my header sticks to top, the tittle "amine edge and dance" dissapears under the header, it is not fluid...
I guess there's a padding missing or something in my JS but I can't find why...
here is my css :
#stickyheader { width: 100%;padding-top:10px;top: 0;z-index: 1000;padding-bottom: 10px;line-height: 24px;position:relative;background-color: #f8f8f8;}
#unstickyheader {height:auto;}
and my JS :
$(function () {
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#stickyheader').css({
position: 'fixed',
top: '0px'
});
$('#stickyalias').css('display', 'block');
}else{
$('#stickyheader').css({
position: 'relative'
});
}
});
});
here is jsfiddle :http://jsfiddle.net/2UCH4/
can anybody help me with this ?
thanks a lot for your help !
Since you are setting that element with position:fixed the space that was fill by the element is now available and the next container just switch up. To fix that you can correct the space with margin-top:
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#stickyheader').css({
position: 'fixed',
top: '0px'
});
$('#stickyalias').css('display', 'block');
var mT = $('#stickyheader').css('height'); /*Add this*/
$('#stickyheader').next('.post').css('marginTop', mT); /*Add this*/
}else{
$('#stickyheader').css({
position: 'relative'
});
$('#stickyheader').next('.post').css('marginTop', '0'); /*Add this*/
}
});
Check this Working Demo