which is positioned 113px from the top, to be on top when users are scrolling the page.
I know there is a similar question, but I am not sure where to put the js code. (Yes I am a newbie)
Old question:
How to "fixed" menu only when it get to the top?
Let me know if you want to see an example.
Best regards
Carsten
Here's an example on how to do this: http://jsfiddle.net/andunai/9x74vkvw/
I've also wrapped .menu into a .menu-placeholder div to reserve place for menu prevent page from "jumping" when it changes state.
You'll need 2 CSS definitions for your menu: .static and .fixed. Here's the example CSS:
.menu {
width: 100%;
margin: 0px 10%;
display: block;
}
.menu.floating {
position: fixed;
top: 0;
left: 10%;
width: 10%;
}
Well, you can put you code in page head like:-
<html>
<head>
<script>
$(document).ready({
$(window).on('scroll', function(){
// instead of 113 use the scrollTop when the element touches the top of the window
if($(window).scrollTop()>=113){
$(element).css('position', 'fixed');
}
else $(element).css('position', 'relative');
});
});
</head>
<body>
// your stuff goes there.
</body>
</html>
You don't need JS for this just use:
#idOftheDiv
{
position:fixed;
top:113px;
}
in your CSS.
Related
I have this div called "floating" and it has to start in the bottom of the screen, but as the user scrolls, it has to move (kindly) to the top and maintain fixed until reaches another div down below.
What I have so far is making the div stops correctly, but it's not moving to the top of the screen when the user start to scroll. What is missing here?
HTML
<div class="container">
<a id="floating" href="#stop"></a>
<div id="dummy">some content</div>
<div id="stop">other content near the footer</div>
<footer>footer</footer>
</div>
CSS
#floating{
display: block;
position: fixed;
bottom: 5%;
right: 5%;
width: 115px;
height: 115px;
color: #fff;
z-index: 1;
background-color: #0055db;
}
JQUERY
function checkOffset() {
var a=$(document).scrollTop()+window.innerHeight;
var b=$('#stop').offset().top;
if (a<b) {
$('#floating').css('bottom', '5%');
} else {
$('#floating').css('bottom', (20+(a-b))+'px');
}
}
$(document).ready(checkOffset);
$(document).scroll(checkOffset);
I appreciate all the help! Thank you!
Try using JQuery Animate
<script>
$(document).ready(function(){
$(document).scroll(function(){
$("#floating").animate({top: '10px'}, "slow");
});
});
</script>
I want to make a half shown div in a page, like a footer. When I click it I want it to slide up. The div will contain information on it.
I achieved this somehow, but my problem is that the div does not get really hidden it just changes the position.
You can find the demo here: http://jsfiddle.net/8ZFMJ/394/
var clicked=false;
$(".two").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"bottom": -430});
}
else
{
clicked=true;
$(".two").css({"bottom": "-200px"});
}
});
I had a similar problem a while ago, in fact I think it was my first stackoverflow question. Unfortunately it got poorly received.
Anyway, the problem is currently that you are just changing the position of the div - that's what .bottom does. I think what you want to do is change the height, see this JSFiddle in which I managed to switch the div between states (no animation yet).
It makes simple use of css's overflow-y: hidden; to hide the div's contents when it is small, and all the JS does is toggle between heights:
if(clicked)
{
$(".two").css("height", 10);
}
else
{
$(".two").css("height", 250);
}
clicked = !clicked;
clicked = !clicked just flips the boolean state of the variable.
Now, to add the animation, we can use jQuery's .animate and produce this beautiful Fiddle
Basically, all we had to do in between is use animate instead of css. Simple, really.
TL;DR
final JSFiddle
.two must be absolute positioned inside .container that must be relative positioned. Then you just change the bottom with a negative value and that will hide the footer.
CSS:
html, body { height: 100%; }
.container {
position: relative;
height: 100%;
overflow: hidden;
}
.two {
position: absolute;
background-color: yellow;
width: 100%;
height:250px;
bottom: -200px;
transition: bottom 1s;
}
jQuery:
var clicked=false;
$(".two").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"bottom": "-200px"});
}
else
{
clicked=true;
$(".two").css({"bottom": 0});
}
});
http://jsfiddle.net/8ZFMJ/398/
I have a static element that is above a fixed element. When the upper static element is clicked, I want to pass this click through to the fixed element. How can I do this? Here is a working example (I wasn't able to get this to work in JSFiddle).
<body>
<div class="lower" onclick="lowerClick()"></div>
<div class="upper" onclick="upperClick()"></div>
</body>
<script>
function lowerClick() {
alert("LOWER CLICK");
};
function upperClick() {
alert("UPPER CLICK");
};
</script>
//CSS file
.lower {
height: 100px;
width: 100%;
z-index: -1;
position: fixed;
background-color:blue;
}
.upper {
height: 50px;
width: 100%;
z-index: 1;
position: static;
background-color:red;
pointer-events: none;
}
I thought that adding pointer-events:none to my upper element would make this work, but when I click the top element, nothing happens.
In fact pointer-events:none works expectedly. But what prevents you from clicking on the lower is the body element. Because of setting z-index:-1 on your lower, it will be sent to behind of its parent (which is the body). So you can set the z-index of the body to a more negative number, of course the postion should be some value other than static (default):
body {
z-index:-1000;
position:relative;
}
Demo
You can use the following css for the upper div
.upper {
pointer-events:none;
}
...also avoid negative z-index, and instead use 1 for lower and 2 for upper. Also why put static and not absolute element at the top?
I'm currently making a website with a "Support is Live" div which will be following the user when scrolling. So I gave it Position: Fixed; and all works fine.
But when the user scrolls back up, I want the Support div to stop so it doesn't "touch" the header.
Here is a picture that hopefully makes it easier to understand:
http://gyazo.com/2694b03181a39c3b6673901b42b5952d
I want the yellow div to stop in line with the orange field on the picture. But when the user starts to scrolling down again, it will follow.
My Best Regards
Philip
This will need some JQuery to work properly:
JSFIDDLE
JQuery
$(document).on("scroll", function() {
if($(document).scrollTop() < 100) {
$('#alert').addClass("absolute");
} else if($(document).scrollTop() > 100) { //100 is the height of your header. Adjust if needed
$('#alert').removeClass("absolute");
}
});
CSS
.absolute {
top: 100px; //same as the value in the conditions
position: absolute;
}
#alert{
background-color: #FF0;
float: left;
height: 400px;
width: 230px;
margin-left: 20px;
position: fixed;
z-index:999;
}
HTML
<div id="alert" class="absolute"> </div>
/!-- add the class so that it doesn't mess up the layout when you load the page --!/
The srolltop function checks how much space is between your viewport and the top of your document. When it reaches the height of the header, a class absolute is applied in order to keep the #alert div in its place.
I'm trying to get a div to animate to the top of the window with by setting the css top value to 0px and changing it's css property from relative to fixed (it's covering another div that is above it). The properties change but it doesn't animate to the top it just goes in one frame. I'd really like to to ease to the top rather than jump.
Here's a fiddle of it http://jsfiddle.net/sedickinson/d4c9u/
Code below
HTML
<html>
<head>
<style>
#menu{
position: relative ; background-color: black; color: white;
text-align: center; width:100%; z-index: 9
}
#space{height:20px; position: relative; z-index: 5}
</style>
</head>
<body>
<div id="space"> </div>
<div id="menu">blah</div>
<script>
var menu = $("#menu");
menu.css('position','fixed').delay(400);
menu.animate({top: '0px'},1000);
</script>
</body>
</html>
The problem is that before you change the position to fixed the element has no 'top' value set. It's set to auto. You could set it to the offsetTop value first, then change the position to fixed, then animate it, like this:
http://jsfiddle.net/d4c9u/5/
var menu = $("#menu");
menu.css({'top': menu.offset().top, 'position': 'fixed'})
.delay(400).animate({top: '0'},1000);
Basically, you can't animate it from 'auto' to '0'.
http://jsfiddle.net/d4c9u/1/
with those two lines commented out , it works fine.
I changed 1000 to 2000 and you can clearly see it animating.
var menu = $("#menu");
menu.css('position','fixed').delay(400);
//menu.css('top', '0px');
//menu.css('position', 'fixed');
menu.animate({top: '0px'},2000);
http://jsfiddle.net/_mtr/LRa9Q/
Added a parent to #menu and #space and set #menu to position: absolute.