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.
Related
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 looked at many answers here on SO but none worked for me.
Below are the posts I have looked before posting this question.
jquery fixed div on scroll-down
jquery fixed div on scroll, smooth movement
jquery fixed div on scroll, bottom boundary
How to manage css left property for fixed div
fixed div position on scroll is not working in all conditions
Absolute DIV inside a relative DIV inside a fixed Div disappears on scroll
Sticking a fixed div on scrolling down
For this purpose I have created a fiddle that shows my problem :
jsfiddle demo here
My problem there is the login span disappearing on zooming (I can't see it on scroll right)
#fixedContainer
{
background-color: #ddd;
position: fixed;
width: 500px;
height: 100px;
top: 0px;
margin-left: 20px;
}
.login
{
float: right;
}
I would prefer a CSS solution but am OK with a Javascript solution too.
Add these css attributes to your #fixedContainer selector:
overflow-x: auto;
max-width: 100%;
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.
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;
}