I'm trying to add a sticky navigator to my blog which will stay on the very top when scrolling down. Simply enough I used jQuery and .scrollTop().
$("document").ready(function($){
/* Sticky Navigation Bar */
var nav = $('nav');
$(window).scroll(function () {
if ($(this).scrollTop() > 125) {
nav.addClass("fixed-nav");
} else {
nav.removeClass("fixed-nav");
}
});
});
With fixed-nav being positioned fixed in CSS
.fixed-nav {
z-index: 9999;
position: fixed;
top: 0;
}
It works certainly (See my blog). Nevertheless I got a small but really annoying problem. When you scroll the page from top to down, you'll notice that right before the navigation bar becomes fixed, contents below it will jump upwards a little. I know the reason is fixed positioning brought the navigator out of the stream so following content jumps up to refill its position. But I don't know how to avoid this. Can anyone come up with any idea?
An easy solution would be to toggle a nav-fixed class on your body, and then add a margin-top to your #main div which matches the height of the nav whilst it was positioned statically.
.nav-fixed nav {
z-index: 9999;
position: fixed;
top: 0;
}
/* Identical to nav's height */
.nav-fixed #main {
margin-top: 40px;
}
Related
I have developed a site that has a fixed footer and header.
The content is also fixed (but that is only because the footer and header can be hidden, but I won't be showing that in my example).
The issue I have is with iPhones and iPads. They are two issues I have had.
Once is it allowing me to drag the header and footer past the confines of the body/html showing whitespace (no idea why they do this) and the other issue is it stopping scrolling as soon as I let go with my finger.
The latter seems to be solvable by doing this:
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
Although I have read that this is not a supported CSS attribute, it does seem to do the trick.
The second issue I have tried to solve with JavaScript by making the header and footer non-scrollable, but it doesn't seem to work properly.
The JavaScript is simple enough:
function disableElasticScroll(e) {
e.preventDefault();
};
which I can put on an element like this:
ontouchmove="disableElasticScroll(event)"
This does not have the desired effect.
I have set up a codepen to highlight the issue. If you have an ipad, have a look. First drag the content inside the .content area. That works nicely (thanks the the -webkit solution). If you then try and drag the .header or .footer you will notice that you can't drag it and no scrolling is happening (again this is good and is due to the JavaScript), but if you try to then scroll the .content again, you will notice that it drags the entire page and does the elastic scroll rubbish.
https://codepen.io/r3plica/pen/LzRQaZ
There is a way to do this so that you don't have to fix the scrolling container. Try positioning your header and footer with a fixed position then padding the body of your page by the height of those elements. This way your page will scroll normally without any hacks. It might look something like this:
body {
padding-top: 60px;
padding-bottom: 40px;
}
header.global {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
}
footer.global {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
}
html, body {
position: fixed;
}
try setting this css property and see if it works.
It solves the elastic scrolling effect on the body.
Sample page
Output to test on ipad
I'm trying to use the Bootstrap affix() plugin. I want the navbar to pin to the top of the screen when I scroll. here is what i have so far:
http://jsfiddle.net/zncud7md/2/
The issue is the content below navbar shifts (tiny bit of inch downwards) when the affix class triggers in. I even tried adding the:
#header.affix + #body { padding-top: 75px; } that i found on other sources but didnt work for me.
I'm unable to find a way around this. Any ideas how can i prevent this issue??
Thanks!!
Bootstrap affix acts like sticky positioning so that if you scroll, you can have an element stick to a fixed position (http://getbootstrap.com/javascript/#affix).
Instead, you can simplify your code by setting your header position to fixed at top:0 and pad the top of your body.
#header {
position: fixed;
top: 0;
z-index: 9999;
}
#body {
padding-top: 75px;
}
http://jsfiddle.net/zncud7md/4/
My Website : http://calisyo.com/product-category/?product=?/jacket-2-poche/
i have problem with my menu when i scrool hes scroll also
in this page I want the top menu to stay on the top of the page when a user/member scrolls.
so looking at your site, when I played around in the Dev tools if i commented out the "banner--stick" css it stayed at the top the whole time. I would only use the position fixed and try not to mess with JS to change the css class you the page is scrolled
use below css
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
margin-top: 0;
Try adding this CSS rule:
header#masthead.banner--stick {
margin-top: 0;
}
I have a fixed position div which is controlled as such.
#backtoallprojects {
float: none;
position: fixed;
top: 0px;
right: 0px;
z-index:9999;
background-color: rgba(0,0,0,0.5);
}
However, I only want it to reveal/appear after the page has been scrolled 95 pixels down.
This is because the main nav bar is 95px in height, and it is overlapping with other buttons, so should only reveal once the main nav has been scrolled out of the page.
Any help would be appreciated
Thanks
PS I have tried both these, but to no avail:
Show div after scrolling 100px from the top of the page
Show div on scrollDown after 800px
This worked for me:
$('#backtoallprojects').hide();
$(document).scroll(function() {
if ($(document).scrollTop() >= 95) {
$('#backtoallprojects').show();
}
else {
$('#backtoallprojects').hide();
}
});
fiddle: http://jsfiddle.net/ray9209/kayweuyp/1/
thanks for your answers. The jQuery script did work, it turns out I had to change the way it was being added to my Wordpress theme.
I needed to use "noconflict mode", so instead of $ use jQuery for the function names.
On the website in the link below, the Logo stays on the bottom of the page when the window ist resized and the content beneath isn't visable till you scroll the site up or down. This works on mobile devices too.
How can I manage it to position a DIV to the bottom of the browserwindow so that the following DIV is hidden until you begin to scroll?
Here is a Link of a Site that shows exactly what I would like to reprogramm.
Please visit this Site as an example
Thanks in advance
CSS:
#element {
display: none;
/* and other CSS */
}
jQuery:
$(document).on("scroll", function () {
if ($(this).scrollTop() > 100) { /* change the integer to whatever you need */
$("#element").fadeIn("slow");
} else {
$("#element").fadeOut("slow");
}
});
First, the element has fixed positioning and is hidden:
#dynamic-to-top {
display: none;
overflow: hidden;
width: auto;
z-index: 90;
position: fixed;
bottom: 20px;
right: 20px;
top: auto;
left: auto;
...
Then, a jQuery function listens for the scroll event. It appears that a calculation is done to see whether the page has scrolled downward past a certain point. Many examples of this behavior exist on SO and the web.