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 :)
Related
This question already has answers here:
How can I bring an image in front of text HTML?
(2 answers)
Closed 2 years ago.
My header have the property "position: fixed", but, some images in the body has the property "filter: grayscale(100%)", when I scroll the page, the images are showed in front of my header.
HTML:
<header><header>
<img>
<img>
<img>
CSS:
header{
position: fixed;
}
img{
filter: grayscale(100%);
}
How can i put them behind my header?
Have you tried
header {
z-index: 1;
position: fixed;
}
If you have other elements with z-index`s set, you'll need to manage them in order.
You can read more about z-index here
Personally, I use :
z-index:9999
Try This
header{
position: sticky;
top: 0;
}
The HTML structure is important while using position: sticky, since it's make the element sticky relative to the parent. And the sticky positioning might not work with a single element made sticky within a parent.
In the header css rule add this: z-index: 100; position: fixed;
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");
}
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 am working on this site http://www.group---me.my/national/
Please remove --- in the url.
For certain deals, there is options, and when you click on the BuyNow button, a popup comes up. I would like to dim (darken) the background, while the popup is shown.
To do this, on my local test site, I added the following div class:
.overlay{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 333%;
background-color: black;
z-index: 20;
opacity: 0.8;
filter: alpha(opacity=80);
}
Then on the Buy Now button, I added
onclick="javascript:document.getElementById('fade').style.display='block';"
I also have this in the site
<div id="fade" class="overlay"></div>
But the problem is, the overlay always hides all the layers, including the popup, regardless how high I set the popup div's z-index.
Any help is much appreciated. Thanks.
Which browser? Which version. I am getting it right here. It should hide right?
And it is prominent. What is that you wanna do here?
If you doesn't specify some parent element to be relative positioned, your overlay div will be positioned relative to body so it can be above all other content.
Can anyone teach me how to create a footer div which is always stay at the bottom of the website regardless of how much information is present in the middle and the most important thing here is that I'm not fixed any height property for the middle content(Please notice that is "website" not "window" because I don't want to fixed the footer that force the user always see the footer whenever they scroll up or scroll down in my website) A specific example is like Facebook that footer always at the end of the page no matter how many times you click older post button. Is there anyway possible in HTML and CSS or even javascript to do that. Please help me and thank you so much in advanced!
I've used stickyfooter in the past. You can learn it here http://ryanfait.com/sticky-footer/
You put the footer content after the other content. That's all.
(Unless you need to deal with earlier content that is positioned out of normal flow, is floating, etc).
One way is to use a master page with the footer div in it. Please take a look at this MSDN article for more info: http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx
If you want the footer to be pushed down to the bottom of the window if the content isn't high enough to fill the window, use the technique offered in this article.
To summarize the article:
Create a wrapper around the page elements:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
Using CSS, give the body 100% height and give the container position:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
Again using CSS, give the content (in this example, #body), a padding-bottom with the height of the footer and position the footer absolutely at bottom: 0:
#body {
padding-bottom: 60px; /* Height of the footer */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Height of the footer */
}
It's important that the footer has a fixed height (i.e. in px or em).
You can see a demonstration of this technique here: http://jsfiddle.net/PPvG/F7Fph/