How do you make a toolbar like object in HTML that follows the user's scroll so that it is always at the top of the viewable page?
Thanks in advance!
css
.selector
{
position: fixed;
top: 0;
left: 0;
width: 100%;
}
html
<div class="selector">
... content for bar here ...
</div>
Do you specifically need it to scroll (animate) or just a static (toolbar like) object?
EDIT:
Ok so to add a static(toolbar like) object that has a width which is 100% of the page, and a height of say 25px, you would do this.
HTML
<div id="toolbar">
<p>Some content...</p>
</div>
CSS
#toolbar {
position: fixed;
width: 100%;
height: 25px;
top: 0;
left: 0;
padding: 5px 10px; /* some styling, please note overall height of the object will be 35px due to 5px padding on top/bottom. */
background: #ccc; /* some styling */
border-bottom: 1px solid #333; /* some styling */
}
Please note that this might overlap any content that you have at the top of the page, so use a top margin to push it down under the toolbar or simply set:
body {
margin-top: 35px;
}
Related
I wanted to have a full width background with my bottom div without changing the page layout structure. The following code allowed me to have a full background color (dark purple) just as I wanted it here. But when I checked the page on my phone, I saw that the bottom went up to 9999px. If I put overflow: hidden, then I dont get the full width background. Please help, thank you!!
.nextpage {
color: #FFF;
background: #2D0072;
width: 100%;
height: 120px;
text-align: center;
padding: 33px 5px;
display: block;
position: relative;
}
.nextpage:before, .nextpage:after {
content: "";
position: absolute;
background-color: #2D0072;
top: 0;
bottom: 0;
width: 9999px;
}
.nextpage:before {
right: 100%;
}
.nextpage:after {
left: 100%;
}
Of course, the best way to tackle this would be to arrange your layout HTML...
<body>
<header>
<div class="page-width">
// header stuff here
</div>
</header>
<content>
<div class="page-width">
// main content stuff here
</div>
</content>
<footer>
<div class="page-width">
// footer stuff here
</div>
</footer>
</body>
Then the CSS...
body {
display: flex;
}
content {
flex: 1;
}
.page-width {
margin: 0 auto; // centers your block element if smaller that it's parent
max-width: 1200px; // you decide
}
But you can't alter your layout?? You will have to do some hackery...
CSS
footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
stuff-in-footer {
margin: 0 auto; // for centering
max-width: 1200px; // you decide
}
The hackery needed is to put a bottom margin on the rest of your page so you can see it when fully scrolled. Also, 'fixed' will position the footer on the bottom of the page, as the CSS is written above, no matter the scroll position of your page. Some JS might be needed to apply the right bottom margin on your content based on the display height of your footer, and more to reveal the footer when the page is fully scrolled.
Check your media queries. Loading the page in a desktop browser and scaling the width of the window down vs loading the page on mobile on BrowserStack generates very different results.
On this page http://goo.gl/m2s1dA
I want to bring the whole header layer "header-container" as below on top of everything and anything inside of "container-site" should appear behind the header when scrolling.
Below is my code.
Full width div
.header-container {
position: fixed;
width: 100%;
z-index: 10000;
}
Fixed width div to center align header and some styling
.header-wrapper {
margin-bottom: -1px;
border-radius: 0;
border-bottom: 1px solid #cc6666;
height: 263px;
position: relative;
display: block;
width: 1140px;
margin: 0px auto;
}
Then body of the page
.container-site {
margin: 0px auto;
width: 1140px;
padding-top: 280px;
}
Currently only the headings (h1, h2, h3) are appearing behind the header. I am using Bootstrap.
From what I understand you want the header to be above all content and fixed to the top of page. In your code, the header-container is inside a fixed parent:
<div class="glass">
<div class="header-container">
...
</div>
</div>
what you have to do is simply add z-index to the parent of the header like this:
.glass { z-index: 1; }
This should fix your problem however, your header is transparent and that creates visual problems when text is under the header elements...
Header is on top but can't figure out it because it is transparent. give .header-container {background:#fff} and see how it looks like.
I have a sticky header on my page, but I found a bug that buttons on right side of sticky header is not visible when browser window is small... and horizontal scrolling does not work for hearder.
Here is html code:
<div class="search-container">
<div class="sticky-wrapper">
<!-- it's fixed header -->
</div>
<div class="sidebar">
<!-- search filters e.g. -->
</div>
<div class="content">
<!-- search results e.g. -->
</div>
</div>
Here is my CSS (sass) code:
.search-container {
.sticky-wrapper {
box-shadow: 0 3px 3px 0 #8f8f8f;
position: fixed;
top: 0;
z-index: 999;
}
.sidebar {
float: left;
margin-left: 5px;
width: 229px;
}
.content {
background: none repeat scroll 0 0 #fff;
border-top: 4px solid #5d5d5d;
display: inline;
float: left;
margin-left: 18px;
margin-right: 0;
width: 691px !important;
}
}
When I make browser window smaller then (sidebar + content) width, horizontal scrolling appears - but it works only for .sidebar and .content.
How can I make sticky header horizontal-scrollable too?
P.S. it's important to working in FF, Chrome, IE >= 9. And I it not good to change/add new css ids or classes, cause many tests become broken.
Please, help.
Thanks kindly.
If it will be helpful - jsfiddle with header and content
I think CSS alone cannot handle this scenario. It would be better if you add a pinch of JS flavour. Try this Fiddle.
Added a JS code: (Note: I have used JQuery, you can also have it rewritten in pure JS if required)
$(window).scroll(function() {
var max_width = 990;
if ($(window).width() < max_width) {
$('.sticky-wrapper').css('margin-left', -$(this).scrollLeft() + "px");
}
});
For what I could test, and for previous experience, is to add a div inside with a width bigger than the container one, and to that container add an overflow-x: auto;
For example:
<div class="sticky-wrapper">
<div class="bigger">Your text here</div>
</div>
.sticky-wrapper {
box-shadow: 0 3px 3px 0 #8f8f8f;
position: fixed;
top: 0;
z-index: 999;
background: grey;
width: 900px;
overflow-x: auto;
}
.bigger {
width: 1000px;
}
Fiddle: https://jsfiddle.net/afs5k1zp/1/
I have an image in my website that is defined with the following CSS:
#settings_big{
border: none !important;
margin: auto 0 0 0 !important;
padding: 0 !important;
float: right;
}
Because of the float the image obviously sits on the right side of the content. The top margin causes the image to sit right beneath the lowest hanging element in the content. This looks OK, but I would really prefer that the image sit as low as possible in the browser window to somewhat frame the content. I've seen multiple examples that use fixed positioning to achieve this, and this would work, however my content has a max and min width of 960px; using a fixed position of
bottom: 0;
right: 0;
causes the image to get pushed far right outside of the content to the edge of the browser window. Is it possible to push the image to the bottom of the browser window while keeping the
float: right;
positioning? I would rather not use JavaScript or jQuery but it is an option I suppose. Thanks in advance.
New answer:
<div class="container contentCont">
<div id="content"></div>
</div>
<div class="container imageCont">
<div id="image"></div>
</div>
With CSS:
.container {
width: 200px;
margin: 0 auto;
background: #ccc;
}
.contentCont {
min-height: 600px;
}
.imageCont {
position: fixed;
bottom: 0;
right: 0;
left: 0;
}
#image {
float: right;
width: 20px;
height: 20px;
border: 4px solid red;
}
Does it right as in this JSFiddle: http://jsfiddle.net/WYX7H/1/
The following might be close to what you need.
Assuming that your page layout vaguely looks like the following HTML:
<div class="wrapper">
<p>some words...</p>
<div class="slot">
<img src="http://placehold.it/200x200">
</div>
</div>
apply the following CSS:
.wrapper {
width: 600px;
height: 600px; /* for demo only, not critical... */
margin: 0 auto;
border: 1px solid blue;
}
.slot {
text-align: right;
position: fixed;
left: 50%;
bottom: 0;
margin-left: -301px;
width: 600px;
border: 1px dotted blue;
}
.wrapper img {
vertical-align: top;
}
See demo at: http://jsfiddle.net/audetwebdesign/6Xnxj/
If you don't know the width of the image (or you don't want to specify it),
create a wrapper that matches the width of the parent element and apply position: fixed to it.
The image can then be either floated or text-aligned to the right within the fixed block.
The fixed block can then be positioned to the left and bottom, and using margin-left
to keep it centered.
If you look at messages page in facebook, there is a header and below it there are three sections. The scroll bar controls the middle section and the left and right sections remain static. How do I implement the same behavior on my webpage? That is everything remains fixed and the scroll bar only controls the middle section? By the way, Facebook's implementation does not work properly in Chrome and in FF stops working when Firebug is turned on.
You don't need to set anything special on the center section. Every block element you want to remain stationary needs to have position: fixed;.
eg
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
header {
display: block;
position: fixed;
z-index: 10; /* keeps the header over the content as the content gets scrolled */
top: 0;
width: 100%;
height: 100px;
padding: 10px;
background-color: black;
}
#sidebar {
position: fixed;
top: 120px; /* add height + padding of header */
left: 0;
width: 150px;
padding: 10px;
background-color: blue;
}
#content {
margin: 120px 0 0 170px; /* add adjacent elements' size + padding */
padding: 10px;
}
</style>
</head>
<body>
<header>
This will stay on the top of the browser window.
</header>
<div id="sidebar">
This will stay on the left.
</div>
<div id="content">
This will scroll normally.
</div>
</body>
</html>