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"
})
}
})
Related
When the user opens the page, the button is fixed on the bottom of the screen, always visible and it stays there as the user scrolls down the page.
Once it hits a div (footer) the button positioning changes to relative.
Thanks guys!
http://jsfiddle.net/noemitotos/tWpkf/508
var targetOffset = $("#footer").offset().top;
var $windowscroll = $(window).scroll(function () {
if ($windowscroll.scrollTop() >= targetOffset) {
$('#fixedbutton').css({ "position": "relative" });
} else {
$('#fixedbutton').css({ "position": "fixed" });
}
});
Please post some code example so that we can better help you. I'm assuming you are looking for something like - http://jsfiddle.net/tWpkf/498/
In this example the image is fixed-
#fixedbutton {
position: fixed;
bottom: 0px;
right: 0px;
}
and the following script simply changes the css on click-
$(function() {
$('.clickme').click(function() {
$("#fixedbutton").css('position', 'relative');
});
});
UPDATE as per comment- http://jsfiddle.net/tWpkf/511/
Open the console to see how it is getting calculated. I believe the issue is with what targetOffset is defined as. As an example, I changed it to $("#footer").offset().top - $(window).height() - 100;
How can I make my lower navbar to stay in the top when I scrolling down? I mean I want to hide only upper navbar? The lower navbar should take place of upper nav.
I tried to affix function:
$('.navbar-lower').affix({
offset: {top: 50}
});
But my code doesn't work.
Here is my try on jsFiddle: http://jsfiddle.net/hw3gxhhf
How can I fix it?
PS
Also I use jquery.bootstrap-autohidingnavbar.min.js
$("div.navbar-fixed-top").autoHidingNavbar({
"showOnBottom": false,
"showOnUpscroll": false
});
You can always listen for the scroll event, and check the scrollTop value. Once you've reached the 50px threshold, you change the margin-top value:
window.addEventListener('scroll', function(){
if (document.body.scrollTop >= 50) {
$('.navbar-lower').css('margin-top','0px');
} else {
$('.navbar-lower').css('margin-top','50px');
}
})
Try using the .scroll function to addClass of position:fixed;
and z-index:10;
script-
$(window).scroll(function () {
var scrolled = $(window).scrollTop();
var elemTop = $('#move').offset().top;
if (scrolled >= elemTop) {
$('body').addClass('nav-is-fixed');
}
else {
$('body').removeClass('nav-is-fixed');
}
});
css-
.nav-is-fixed #move {
position: fixed;
top: 0;
z-index:10;
}
I'm looking to create a fixed sidebar, very similar to that (in terms of functionality) of Apple's. When you configure your mac in their store, as you scroll down the page the basket on the right is fixed positioned; perfectly.
position:fixed is relative to the viewport and not it's parent container so what kind of scripting is going on in the background to perfectly position the sidebar?
(emphasis on perfectly). http://store.apple.com/uk/buy-mac/mac-pro?product=ME253B/A&step=config#
It is done using position:sticky.
.slider-content #secondary.sticky {
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 10px;
z-index: 1;
margin-bottom: 0;
}
You can read more about it here
Found this in another post:
http ://jsfiddle.net/63cFy
( source: http://stackoverflow.com/a/19317397/3378288 )
As i see on your example page apple is doing the same thing. They're adding a class to the element when someone scrolls down and its not in the view anymore. The positioning in this case is relative to the "wrap" div container.
I've done by switching between 'fixed' and 'absolute' regarding the document's body scrollTop.
function scrollFunction() {
var scrollPos = document.body.scrollTop;
if (scrollPos > 40) {
document.getElementById("fixed-floater").style.position = "fixed";
document.getElementById("fixed-floater").style.top = "0px";
} else {
document.getElementById("fixed-floater").style.position = "absolute";
document.getElementById("fixed-floater").style.top = "40px";
}
}
window.onscroll = scrollFunction;
http://jsfiddle.net/ua4fhrzy/
I tried to avoid jquery if someone is interested.
Check out Bootstrap affix. It's also what's used in their right menu.
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;
}
I need that when I scroll down or up with mouse wheel or sidebar my div change incrementally the Y position (for example 50px up or down ). I need this in Javascript/Jquery.
I Try this code, but only works for scrolling down(The Scrolling Down and Up Function is working well, only the animate part is working wrong):
UPDATE:
var sidebarScrollTop = 0;
$(document).ready(function() {
sidebarScrollTop = $("body").offset();
$(window).scroll(function ()
{
var docScrollTop = $('body,html').scrollTop();
if(docScrollTop > sidebarScrollTop.top)
{
$("#legend").stop().animate({ marginTop: "+=50px",}, 'slow', "easeOutCirc" );
}
else
{
$("#legend").stop().animate({ marginTop: "-=50px",}, 'slow', "easeOutCirc" );
}
});
});
$(window).resize(function()
{
sidebarScrollTop = $("#legend").offset().top;
});
$(document).resize(function()
{
sidebarScrollTop = $("#legend").offset().top;
});
Thanks
You can use
$(window).scroll(function() {
// Your scroll code here
});
to grab whenever the user is scrolling on the page.
Next you want to change the div's y-value.
If the div is positioned absolute, this is just changing its top-value.
$('my-div').top = original-top-value + $(window).pageYOffset;
I believe you need is to keep the div always showing even when user scrolls down. If that is the case then it can be done with only CSS:
div {
position: fixed;
z-index: 100;
top: 100px;
left: 100px;
}
The values of z-index, top and left are dummy values. Change em with your ones.
UPDATE:
Since CSS Solution won't work for you, here is a working example writter in JS: http://jsfiddle.net/qCtt5/