I'm making this website where I would like to disable the sticky header but the theme doesn't provide an option to do that and the theme doesn't add a class once the menu is sticky. I've tried changing position:absolute but it's not working.
My last hope now is using JS to add a class to the header once the site is scrolled and than just disabling the menu but I'm not sure on how to accomplish that.
Here's the link to the site: https://vectormsp.co.uk/
This is header wrapper, I've tried changing the position to absolute but it doesn't seem to work.
#headerwrap {
background-color: #fff;
position: fixed;
bottom: 0;
z-index: 999;
width: 100%;
}
just change fixed to relative
#headerwrap {
position: relative;
}
You can use:
if(window.scrollY==0){
console.log("User is at the top of the page!")
}
So to add a class to an element with Javascript when the user is at the top of the page you can use something like:
let header = document.getElementById("headerwrap")
if(window.scrollY==0){
header.classList.add("NAME-OF-CLASS-TO-ADD");
}
else {
header.classList.remove("NAME-OF-CLASS-TO-REMOVE");
}
Related
I'm trying to make a sticky element in my website that it's made in wordpress with a custom template.
I was trying everything, from css (position: sticky) should work. But in my case is not.
Can you help me with this issue?
This is the structure of the page, on the left the sticky element that I want. On the right, the content
Thank you you very much for your time.
I have checked your code.Position sticky is not working as because one of the parent div has overflow:hidden property so basically position sticky is not working with overflow hidden so please apply below property in your css file and then check
<style>
aside.widget-area.col-xs-12.col-sm-12.col-md-4.col-lg-3.order-2-sm-sidebar {
position: sticky;
top: 80px;
height: 600px;
overflow-y: scroll;
}
#widthContent {
overflow: unset !important;
}
</style>
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'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;
}
I want to add a always-on-top header like the new twitter does.
Explanation: When the user scrolls down the page, I want the header to stay on top of the window.
Somebody know a script that does that? Or can target me how can I do it?
You can use position: fixed; on the header.
<div id="header">
content goes here.
</div>
and the CSS:
#header { position: fixed; z-index: 9999; top: 0; left: 0; }
You need to give your header a position of fixed to make it visible throughout the page. And set the top value appropriately along with width.
Example:
#header{
position:'fixed';
top:0;
width:800px;
}
Use position:fixed on the header in its CSS.
Also, dont forget to set the left and top attributes to where you want it to go :)