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;
}
Related
On my page, I'm displaying a log file in a div element with overflow-y:auto. In the top right corner of the div, I'm overlaying a close button div with position:relative.
When the scrollbar appears, the button is overlaying the scrollbar which is hard to see and looks ugly. You can see an example here: https://jsfiddle.net/4azw0rLf/
Moving it with javascript when scrollHeight exceeds clientHeight feels like a hack. Is there an option in CSS to move the close button to the left for the width of the scrollbar as soon as it appears?
You can wrap your terminal and move your close button inside. I created a minimal example starting from your code.
EDIT
With the first answer the close button scrolled along with the text, I corrected using the position: sticky; and top:0px;
It is not compatible with all browsers, but with most, you can check compatibility here.
const terminal = document.getElementById("terminal");
addText = () => {
terminal.innerHTML += "overflowing line<br>";
}
#container-terminal {
position: relative;
overflow-y: auto;
border: 2px solid;
height: 100px;
width: 200px;
}
#terminal {
position: absolute;
height: 100%;
width: 100%;
}
#closeBtn {
background-color: red;
position: -webkit-sticky;
position: sticky;
top:0px;
width: 20px;
display: inline-block;
float: right;
}
<div onclick="addText()" style="cursor:pointer;">Click to add text</div><br>
<div id="container-terminal">
<div id="terminal">CSS only<br>CSS only<br>CSS only<br>CSS only<br>CSS only<br></div>
<div id="closeBtn">X</div>
</div>
In the snippet below, you will see that I have two sections. One green and one blue. Then in the green section, there is a circle icon. Essentially what I am looking for is for the circle icon to be placed where it is currently on page load, but then as the user scrolls, for the icon to change to a fixed position until the blue section is at the top of the screen. Then when the user scrolls back up for the circle icon to do a reverse action and stay fixed until it gets back into its original position.
How can I do this?
#slantWrap {
height: 80vh;
width: 100%;
position: relative;
background: green;
}
#redIcon {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 2;
margin: 0;
}
#redIcon img {
height: 90px;
width: auto;
}
#sec {
width: 100%;
height: 400px;
background: blue;
}
<div id="slantWrap">
<div id="redIcon">
<img src="http://www.iconhot.com/icon/png/devine/256/circle.png" alt="icon">
</div>
</div>
<section id="sec"></section>
$(window).scroll(function (e) {
if($(this).scrollTop() >= $('#sec').offset().top - 90){
$('#redIcon').addClass('fixed');
} else {
$('#redIcon').removeClass('fixed');
}
});
So this function fires every time a user scrolls. What the if statement is looking for is, if the second div (Blue background) is 90px from the top of the window, (note that this - 90 is the same height as the image) the add class of fixed if the the #sec div is NOT 90px from the top of the screen then remove the class of fixed. Lastly you will need to add this to your CSS to have a position fixed with the class is added.
#redIcon.fixed{
position:fixed;
top:0px;
}
Working CodePen: https://codepen.io/ben456789/pen/OZPEpG
Hope this helps!
I have a div (#dynamic) and I would like to get the values of its position relative to the browser viewport as the user scrolls down the page.
Currently my code snippet returns the incorrect result as I attempt to set the bottom position of the headingDiv div to the top of the #dynamic div. Fixing this would solve my problem. To be clear, the orange box should shrink as the text comes up.
I have seen this question where user 'codef0rmer' suggested to use $("#dynamic").offset().top; however for me, this just yielded the same result.
Here is the code in case the jsfiddle breaks:
function sizeHeader() {
var navPos = document.getElementById("nav");
var dynPos = document.getElementById("dynamic");
$("#headingDiv").css("top", navPos.getBoundingClientRect().bottom);
$("#headingDiv").css("bottom", dynPos.getBoundingClientRect().top);
}
$(window).scroll(function() {
sizeHeader();
});
window.onload = sizeHeader();
/* Normalisation */
* {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
/* Navigation bar */
nav {
display: block;
background-color: black;
color: #FFFBD0;
padding: 1%;
position: fixed;
right: 0;
left: 0;
bottom: auto;
z-index: 100;
}
/* Main content */
#headingDiv {
position: fixed;
left: 0;
right: 0;
top: 3em;
bottom: auto;
background-color: peru;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
#dynamic {
padding: 1%;
position: relative;
top: 55vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<body>
<nav id="nav">
<b>Hello</b>
</nav>
<div id="headingDiv"><h1>greetings</h1></div>
<main id="dynamic">
<p>ello</p><p>ello</p><p>ello</p><p>ello</p><p>ello</p><p>ello</p>
<p>ello</p><p>ello</p><p>ello</p><p>ello</p><p>ello</p><p>ello</p> <p>ello</p><p>ello</p><p>ello</p><p>ello</p><p>ello</p><p>ello</p>
</main>
<script src="main.js"></script>
</body>
You were getting the top position of the dynamic div, which is measured from the top of the window... but then using that to set the bottom of the header. The "bottom" css property is measured from the bottom of the window or page.
When #dynamic is near the top of the window, it gets smaller (say 20px). But you want the bottom of the header to get further away from the bottom of the window (20px from the bottom). So you need to subtract one from the other.
window.innerHeight - dynamic.getBoundingClientRect().top;
jsFiddle
Are you taking into account the scroll position of the window?
elem.offsetTop will give you the offset from the top of the page. window.scrollTop will give you the offset of what's being viewed from the top of the page. So elem.offsetTop - window.scrollTop will give you how many pixels the top of the element is from the top of the viewport, taking all that into account.
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;
}
I have a div , something like this
#footer
{ position:fixed;
left:40px;
top:0px;
}
The position is fixed when I scroll vertically or horizontally. But i want the div to be fixed when user scrolls the scroll bar vertically but should be varying when user scrolls the scroll-bar horizontally.
I have seen some of the forums and posts but mostly I found jquery script.I want to know if there is a way to do it in CSS?
Fixed position in only one direction
I read this post but I did not understand the jquery script. Kindly let me know the way to do it in css or the better way to do it with jquery.Thanks
Seems to be impossible to get this "look fine" with only CSS/HTML.
As mentioned from Ruup or Fixed position in only one direction, layering over JS for it, is a good option.
Fortunately, i found a way to get it work somehow (not that beautiful):
http://jsfiddle.net/MKEbW/5/
HTML (inside the body-tag):
<div id="simulated-html">
<div id="footer">
<span>
<!-- Footer text here -->
</span>
</div>
<div id="simulated-body">
<!-- Your website here -->
</div>
</div>
CSS:
* { margin:0; padding:0; }
html {
font: 12px/1.5em Georgia;
}
p { padding: 5px; }
html, body {
height: 100%;
overflow: hidden; /* hide scrollbars, we create our own */
}
#simulated-html {
background: orange;
overflow-x: scroll; /* force horizontal scrollbars (optional) */
overflow-y: hidden; /* hide. we use the #simulated-body for it. */
position: relative; /* to align #footer on #simulated-html */
height: 100%;
}
#simulated-body {
overflow-y: scroll; /* force vertical scrollbars (optional) */
overflow-x: hidden; /* hide. we use the #simulated-html for it. */
height: 100%;
background: #eee;
/* use as a container */
width: 450px;
margin: 0 auto;
}
#footer {
position: absolute;
bottom: 0px; /* vertical align it to #simulated-html */
width: 100%;
background: red;
z-index: 99; /* always show footer */
color: white;
}
#footer span {
width: 450px;
margin: 0 auto;
background: green;
display: block;
}
Seems to work in IE7+ and modern browsers, tested via browserlab.adobe.com.
Tested with scrollbars, smaller and wider viewports in Chrome 18.
I recommend a fallback for not capable browsers and/or a JS workaround.
The linked post is exactly what you need. You can copy the exact script.
$(window).scroll(function(){
$('#footer').css('left','-'+$(window).scrollLeft());
});
The div css is like this (probably not footer when it has top 0px :P but ok)
#footer
{ position:fixed;
left:40px;
top:0px;
}
When you scroll the jquery script just adjusts the left(x) coordinate to the same value as the scrollLeft of the window.
There is a small fix on the previous code.
The changed javascript code for moving fixed div horizontally
$(window).scroll(function(){
$('#footer').css('left',-$(window).scrollLeft());
});
how should the horizontal axis vary? the way this code is currently it would stay 40px from the left at all times. in order to make the left margin change position relative to the size of the window you must use percentages and negative margins. for instance, to center a fixed div:
#centered {
height: 350px;
top: 0;
position: fixed;
width: 1024px;
left: 50%;
margin-left: -512px;
z-index: 9999;
}
notice that your negative margin must be HALF the width of your div. if you want it 40px to the left of center then you would add another 40px to margin-left.