I have a page with long content on it. Together with that there is a sidebar which has less content and at the moment if you continue scrolling down, at some point there will be just whitespace in a sidebar.
So what I tried to do is once sidebar reaches end of its content, height give it fixed position, but while there are still things to scroll give it static position.
So I've got
$(window).scroll(function () {
var y = $(window).scrollTop();
var x = $(window).scrollTop() + $(window).height();
var s = $('#sidebar').height();
if (x > s) {
$('#sidebar').css({
'position': 'fixed',
'bottom': '0'
});
}
if (x < s) {
$('#sidebar').css({
'position': 'static'
});
}
});
This kinda works. It starts with static position, but when I scroll in any direction it changes to fixed. However I want it to remain static while there is something to scroll through (in upwards and downwards directions)
EDIT Basically it should work like this: http://jsfiddle.net/cJGVJ/12/ but without the shadow effect.
Give HTML and BODY height: 100%;
html, body{
height: 100%;
}
#sidebar{
position: absolute;
bottom: 0px;
}
Related
I'm building a website with a sidebar that, once the user scrolls past a certain point it becomes fixed on the site. This code works fine.
The issue that I am coming into is that the sidebar is overlapping the footer when the user scrolls to the bottom of the page. I wrote code to detect when the bottom of the sidebar hits the same position as it's containing element - when that happens I am taking the position of the bottom of the containing element and subtract the height of the sidebar element and using that number to give the sidebar it's new "top" (while also changing the position to "absolute").
This is where I am running into the issue - once the sidebar is overtop of the footer as the user scrolls the code that is getting called alternates between the normal "fixed" position code and the "absolute" positioned code giving it this flickering effect.
For the life of me I can't figure out why the "fixed" code keeps getting called.
Here is the code:
( function( $ ) {
var sidebar_pos = $('#secondary')[0].getBoundingClientRect();
var pos_top = sidebar_pos.top + window.scrollY; //need this to get the pos of TOP in the browser - NOT the viewport
var main_pos = $('.main-content')[0].getBoundingClientRect();
var main_bottom = main_pos.bottom + window.scrollY;
var stop_pos;
var i = 0;
$(window).scroll(function(event){
var scroll = $(window).scrollTop();
var produce_pos = $('.produce')[0].getBoundingClientRect();
var pos_bottom = produce_pos.bottom + window.scrollY;
//console.log("scroll "+scroll);
//console.log("top " + pos_top);
console.log(main_bottom);
console.log('bottom ' + pos_bottom);
if( scroll >= pos_top){
if ( pos_bottom >= main_bottom ){
//if the sidebar would end up overlapping the footer
if(i == 0){
//only need to set this once, not on every scroll
stop_pos = main_bottom - $('#secondary').height() ;
}
$('#secondary').removeClass('hover').css({
position: 'absolute',
margin:0,
left: sidebar_pos.left,
top: stop_pos
});
i++;
} else {
$('#secondary').addClass('hover').css({
position: 'fixed',
left: sidebar_pos.left,
marginTop: '1.5em',
top: 20
});
setTimeout(() => {
$('*[data-widget="comet"]').addClass('active');
}, 5000);
setTimeout(() => {
$('*[data-widget="produce"]').addClass('active');
}, 7000);
}
} else if( scroll < pos_top && $('#secondary').hasClass('hover') ){ //if user scrolls up past original pos of sidebar, remove effects
$('#secondary').removeClass('hover').css({
position: 'relative',
left: 'auto',
top: 'auto'
});
i = 0;
}
});
}( jQuery ) );
I also have a codepen of the script in action.
https://codepen.io/antlaur00/pen/ExyrgYR
Any help is much appreciated! Thanks!
Well its pretty simple, just add Z-index property to your footer CSS, that way it will always overlap your sidebar .
You can refer to this article regarding the z-index property
https://www.w3schools.com/cssref/pr_pos_z-index.asp
This question already has an answer here:
jQuery window.scroll move div vertical in opposite direction
(1 answer)
Closed 7 years ago.
How can I reverse the scroll function of my website such that when the user scrolls up, the page will scroll down in the opposite direction?
Doing this for the entire page is going to give a very broken experience.
You'll wind up doing something like the following, where you find the height of your content, then start manually positioning it within a fixed viewport:
var $window = $(window), $container, height;
$(function() {
$container = $('#content');
// Add some content
for (var i = 0; i < 1000; ++i) {
$container.append('<h1>line ' + i + '</h1>');
}
height = $container.outerHeight();
$('body').css('height', height + 'px');
// Set up scroll handling, but also invoke once to initialize positions
$window.on('scroll', onScroll);
onScroll();
});
function onScroll() {
scrollTop = $window.scrollTop();
$container.css('top', (scrollTop - height + $window.height()) + "px");
}
#content {
position: absolute;
}
#viewport {
position: fixed;
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="viewport">
<div id="content">
</div>
</div>
Basically, #viewport remains fixed infront of the user, occupying the whole screen. The content scrolls backwards inside of #viewport while the HTML document scrolls normally.
Meanwhile, #content has a height of ~50,000px, which I read and apply directly to the document, so that there will be a scroll bar of the appropriate size even though #content is contained within #viewport which has a fixed height set to that of the window.
Then, on scroll, the actual content gets position so that it moves upwards by the same distance you've scrolled with scrollTop.
In Yahoo website, when scroll down, a blue part is fixed to the top, while if not scroll down, the blue part is not fixed.
How to implement this ?
May I try onScroll function?
I use inspect element and, apperantly it changes class when that "blue part" is not in view,
so what it is doing (I guess) is changing the classes while it is in view and not in view, you can find if a div is in view and then change accordingly, "onscroll" is a great idea
Use $(window).scroll(function() on the part which you want to be fixed.
Fiddle Demo : Demo
$(window).scroll(function(){
if ($(window).scrollTop() >= 100) {
$('.sticky-header').addClass('fixed');
}
else {
$('.sticky-header').removeClass('fixed');
}
});
If you want to apply the fixed part to the header replace the class name in the $(window).scroll(function(){}): function.
Example for fixed Header while scrolling : Demo-2
You can make it fixed just with css.
<div id="myHeader">Header stuff</div>
#myHeader {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
Yes, you need to bind to win scroll like this:
var element = $(YOURTOPELEMENT)
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > element.offset().top) {
element.css({
position: "fixed",
top: 0
})
} else {
element.css({
position: "relative"
})
}
})
What I'm trying to do with javascript is:
Once you scroll so far down the page, change the position of #sidebar-box-fixed from position: relative; to position: fixed;. Change back to position: relative; once you scroll back up.
What would be the easiest way to do this?
You could try something in this direction:
$(document).ready(function() {
var gap = 100;
$(window).on('scroll', function(){
var position = $(window).scrollTop() > gap ? 'fixed' : 'relative';
$("#sidebar-box-fixed").css('position', position);
});
});
/-----------------------------------------------------------------------------------/
EDIT: I do NOT want to use fixed CSS positioning. It's at the bottom of the viewport
without scrolling, however I want it to follow when it gets to the top.
/-----------------------------------------------------------------------------------/
I'm making a Squeeze Page with a MASSIVE sidebar. It's got tons of testimonials and facts and pictures and stuff. However, I have a button near the top I want to follow the user down the page as they scroll. Shouldn't be too hard right?
I've got this script - which starts dragging the .followme when it hits the top of the page. However - it also pushed down all the divs beneath it. Can I tell it to target JUST .follow and no affect the divs below it?
<script type="text/javascript">
var documentHeight = 0;
var topPadding = 15;
$(function() {
var offset = $(".followme").offset();
documentHeight = $(document).height();
$(window).scroll(function() {
var sideBarHeight = $(".followme").height();
if ($(window).scrollTop() > offset.top) {
var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
var maxPosition = documentHeight - (sideBarHeight + 100);
if (newPosition > maxPosition) {
newPosition = maxPosition;
}
$(".followme").stop().animate({
marginTop: newPosition
});
} else {
$(".followme").stop().animate({
marginTop: 0
});
};
});
});
You have an easier option which doesn't require any JS\jQuery at all.
.followme {
position: fixed;
height: 30px;
width: 30px;
background-color: #FF0000;
top: 48%;
left: 0;
}
This will never affect any of the other elements of the page and doesn't require any scripting at all. Now if you need the element (followme) to for example show at a certain scroll % or any other interactivity you might think of, then you will be needing to think more creatively. But if the problem is just to let the element follow your scrolling then the above should be a good and clean solution.
Example code:
http://jsfiddle.net/bhpgC/