I want to make navbar with fixed position. At the top of the page the navbar should be under the header and after scrolling down when header is no longer visible the navbar should be at the top of the page. How can I do that? When I try to do it after scrolling down between the navbar and top of the page is still the height of the header(even though it is no longer visible).
Here is my css:
header{
background-color: red;
width: 100%;
height: 100px;
}
nav{
position: fixed;
float:left;
height: 100px;
width: 100px;
margin-left: 10px;
margin-right: 50px;
margin-top:50px;
background-color: green;
}
main{
background-color: blue;
height: 1500px;
margin-left:15%;
margin-right:5%;
margin-top:50px;
}
and jfiddle: https://jsfiddle.net/pg2kwk5e/
You can add a class to the nav element with javascript after scrolling a certain amount.
I've used Jquery as it's faster and easier to show this in action.
Example
I'm just adding a class .fixedTop to the nav after the window scrolls more than 150 pixels, the class itself just has top:0;margin0; to move the absolute positioned element to the top and remove the margin which was set before.
Code:
var $nav = $("nav"),
$(window).scroll(function() {
if($(this).scrollTop() > 150) {
$nav.addClass('fixedTop');
} else {
$nav.removeClass('fixedTop');
}
})
CSS:
.fixedTop {
top: 0;
margin: 0 !important;
}
Related
i currently have a div that appears fixed after scrolling. i want that div to to remain visible but not fixed once the user reaches the bottom of the page..
this is what i have so far:
var topOfOthDiv = 800; //set manually for example
$(window).scroll(function() {
if ($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
$("#ctawrapper.ctaFloat").addClass('show'); //reached the desired point -- show div
} else {
$("#ctawrapper.ctaFloat").removeClass('show'); //reached the desired point -- hide div
}
});
#ctawrapper.ctaFloat {
position: fixed;
bottom: 0;
height: auto;
max-height: 100px;
width: 90%;
display: none;
}
#ctawrapper.show {
background: #fff;
width: 100%;
z-index: 999;
left: 0px;
padding: 15px;
border: 1px solid #ddd;
display: block!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ctawrapper" class="clearfix ctaFloat">
<h4>sponsored topics</h4>
</div>
everything i have tried to do to add a new class or change the css once it reaches the footer have failed. can i get some help please?
I'm building an app in Webkit for Android using HTML and CSS. I have fixed position header and sometimes fixed position footer(based on the module). When the content is more, I don't want the scrollbar to overlay the fixed header. Hiding it behind the header will also work. How can I achieve this without fixing height for the wrapper or using height: calc(); CSS for the wrapper?
I want app scrollbar to be like this:
Instead, it is like this now:
Here is the sample code:
.header {
position: fixed;
background-color: red;
left: 0;
top: 0;
width: 100%;
z-index: 999;
height: 60px;
}
.wrapper {
padding-top: 60px;
min-height: 100%;
height: auto;
}
.footer {
position: fixed;
background-color: grey;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
}
jsfiddle
You said that you don't want to fixe the .wrapperheight, but I think, you should fixe it, because there is no way to hide this scrollbar behind the div header element.
.wrapper {
margin-top: 60px;
min-height: 100%;
height: 320px;
overflow-y: auto;
}
Demo: http://jsfiddle.net/9hy6ybsz/4/
I'm not sure if my solution gonna work for you. You need to setup the height of your div="wrapper" and add CSS property overflow-y:
height: calc(100% - (60px + 50px));
Example, where 60px is the header height and 50px is the footer height
.wrapper {
margin-top: 60px;
overflow: auto;
background: yellow;
height: calc(100% - (60px + 50px));
display:block;
}
Working JSFiddle -> http://jsfiddle.net/9hy6ybsz/1/
Create a new div tag , which acts as a parent tag.
and apply scroll for it.
then create the header div and maintain Fixed position.so you can get the scroll over the fixed DIV!
<div id="first">Something</div>
<div id="last">something too</div>
<style>
#last {
position: absolute;
margin:0;
padding:0;
bottom:0; /*yes this div is at the bottom*/
}
#first {
}
</style>
My problem is that I can't reach last div with the border of the first div. I want last div to be at bottom and first div to have overflow:auto;? But it doesn't work. When I fill my div some text nothing is showing no scrollbar or anything like that and the first div kind of goes behind the last div even though I haven't assigned them any z-index values.
How Can I solve this? I want my first div to grow until it reaches last div and fill it with text maybe with scrolling appearing when it is only needed. I mean when two divs touch each other kind of.
This will give you a fixed size footer (#last) but the content (#first) expands as needed:
body {
margin: 0px;
padding: 0px;
}
#wrapper {
position: absolute;
top: 0;
bottom: 200px;
left: 0;
right: 0;
}
#first {
background-color: #5588FF;
width: 100%;
max-height: 100%;
overflow-y: auto;
}
#last {
background-color: #FF8855;
position: fixed;
bottom: 0px;
height: 200px;
width: 100%;
}
See this fiddle for the full solution: http://jsfiddle.net/xWa9f/4/
Is this what you want? Fiddle link: http://jsfiddle.net/emw2x/2/
body, html{
height: 100%;
}
#last {
margin:0;
padding:0;
bottom:0; /*yes this div is at the bottom*/
border: 1px solid black;
width: 100%;
height: 10%;
}
#first {
border: 1px solid red;
height: 90%;
width: 100%;
padding: 0;
margin: 0;
overflow: auto;
}
Give that a try to see if that's what you want.
if you accept some javascript in the mix, i have this solution for you.
first, change the absolute positioning to fixed positioning of the #last div.
set overflow:auto to the #first div and the javascript does the rest (you need jQuery):
(function () {
var heights = window.innerHeight;
var outerHeights = $("#last").outerHeight(true);
jQuery('#first').css('height', (heights - outerHeights) + "px");
})();
basically it calculates the window height of your monitor, it subtracts the height of the #last div and gives what's left to the #first div. when the content exceeds the available pixel height, a scroll bar will appear.
check it here: http://jsfiddle.net/vlrprbttst/rR7Uu/2/
the plus here is this works at any window resolution, so you don't have to worry about screen resolutions and you don't have to worry about the height of your #last div (margins, paddings, borders, whatever included)
Hi I have a header which is fixed position and width 100%, I also have a sidebar which slides out from the left, it is also fixed position. The problem is the sidebar overlaps the header and I want the header to shrink with the sidebar as the sidebar slides out. I thought it would do this naturally because it is set to width 100%. However it doesn't.
Any ideas?
Thanks
Header
#header_wrapper{
width:100%;
height: 50px;
/*background-color: #dddddd;*/
background-color: #2a5f8c;
border-bottom: 2px solid #ffffff;
float: left;
position: fixed;
z-index: 80;
border-bottom: 1px solid #444444;
}
Sidebar
#category_wrapper{
width: 200px;
height: 100%;
position: fixed;
float: left;
border-right: 3px solid #333;
display: none;
}
Jquery
$("#header_category").click(function () {
$('#category_wrapper').toggle(200);
});
HTML
<div id="category_wrapper"></div><!--end category_wrapper-->
<div id="header_wrapper"></div><!--end header_wrapper-->
Rather then setting the width of the header to 100% you could set the left property to 0px and the right property to 0px and then when the menu slides out you could just animate the left property to the width of the left menu, and then when it goes back animate it back to zero.
example of animate:
$( "#category_wrapper" ).animate({
left: 200,
}, 200, function() {
// Animation complete.
});
I have a JavaScript menu bar that is positioned on my webpage, then when the browser bar reaches the top of the menu it locks into a fixed position and moves with the window. However, i need to contain the menu within a div, how can this be done?
This is my menu bar:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).load(function(){
$(window).scroll(function(){
if ($(window).scrollTop() >= 200)
{
$("#floatbar").css({position:'fixed',left:'0',top:'0'});
}
else
{
$("#floatbar").css({position:'absolute',left:'0',top:'200px'});
}
});
});
</script>
and this is my html:
<div id="menu_runner">
<div id="floatbar">
Issue 49<br />
Issue 48<br />
Issue 47<br />
Issue 46<br />
</div>
</div>
and my css:
#menu_runner {
width: 100px;
height: 2000px;
float: right;
position: relative;
}
#floatbar {
width: 70px;
position: absolute;
top: 200px;
}
where the menu runner is the containing div of the menu, and the floatbar obviously contains the menu which runs the JavaScript.
However when I try this code, the menu sticks to the left and 200px from the top, and not within the menu_runner div. How can i make the floatbar be positioned in the menu_runner div and then scroll down with the JavaScript within the div as it should.
if ($(window).scrollTop() >= 0) <------set it to zero or
you could use css
#floatbar {
position:fixed;
top: 10px; /* tells browser the div should position at the very bottom of the window */
right: 1px; /* tells the browser the div should have no space on the right */
left: 1px; /* tells the browser the div should have no space on the left */
margin: 1px; /* because we want this width: 100%, the margin must be 0 */
padding: 1px; /* because we want the width: 100%, the padding must be 0 */
width: 10px; /* makes the div a bar stretching across the bottom of the screen */
height: 35px; /* makes the floating bar 35 pixels high*/
z-index: 9999; /*positions this div on top of all other elements in the site - this number can increase or decrease to your liking */
border:1px solid #000;
}