I've been looking all over on how to fix a div when scrolling past 100% and then for it to sit again when below 100%.
I have been using this jsfiddle to work when i want to sit at a certain pixel height.
Any help would be greatly appreciated.
Alternatively, having the div fix when another div is on visible may work just as well.
Thanks in advance.
Here is the code for jsfiddle.
function fixDiv() {
var $cache = $('#getFixed');
if ($(window).scrollTop() > 100)
$cache.css({'position': 'fixed', 'top': '10px'});
else
$cache.css({'position': 'relative', 'top': 'auto'});
}
$(window).scroll(fixDiv);
fixDiv();
just position the menu at the top of the screen with fixed positioning :
#myMenu{
position : fixed;
top : 10px;
left : 10px;
}
From your comments I think this is what you are trying to achieve. The way this will act is :
You have a <div> with 100% height, you click a button and the page scrolls down to the next div which is 100% height. Then you cna click to go to the next or the last <div>. Meanwhile the menu is always staying right at the same spot. This is what Fixed positioning means. no matter where you scroll that menu div is always going to stay in the
same spot.
Edit
try this if you want the menu to hide while scrolling , then appear again in the same spot.
$(document).scroll(function(){
$('#myMenu').hide();
});
then you would have to show again , you can find a solution with exact code that works , but that is an idea
Related
I am developing a parallax website, and in one page(div) I have a some images in another div like
<div> //page which fits in window
<div> //inner div which will be on left side, and this needs to be fixed positionwhile scrolling
Some content....
</div>
<div> //inner div it will be on right side with 4 small images, this div should move from bottom to top while scrolling
<img></img><img></img><img></img><img></img>
</div>
</div>
So to tell shortly, I have a page with two divs, in which I want to move only one div and another should be fixed.
As seen in picture Vision div and background should be fixed and only four images in the right side should move from bottom to top while scrolling.
Once the second div scrolled to top, then I will move the page and show next page.
Any ideas???
Created a fiddle for you here: https://jsfiddle.net/svh8owgz/
In answer to your questions: fixing an image regardless of scrolling can be done with the CSS with position: fixed.
So in my example - I created the div with class companyInfo and styled it:
.companyInfo {
position:fixed;
top:0%;
left:2%;
width: 200px;
height:200px;
background-color: blue;
}
Which would be the part where it says 'Vision' in your image.
Then as for the thumbnailcontainer - that's just got a relative positioning within the overall container:
div.imageContainer {
position:relative;
left: 400px;
width: 200px;
top:400px;
}
That's pretty straight forward: I will just move as expected ( at least - if the page container is larger than the screen height and scrolling is possible to begin with ).
Then you mentioned 'Once the second div scrolled to top, then I will move the page and show next page'
What you could do is use the jQuery.appear plugin to check whether elements come into visible range or not. What I did was add a div with id pageTrigger below the actual page container. That means you can start listening to events of users scrolling to the bottom of you page:
(function ($) {
$('#pageTrigger').appear();
$('#pageTrigger').on('appear', function (event, $all_appeared_elements) {
// Trigger page change
alert("page change triggered");
});
})(jQuery);
Be sure you reference jQuery and jQuery.appear in your page otherwise this will not work. Also - I couldn't find a nice HTTPS CDN for this plugin so I had to include the source - sorry for that.
This might be two questions in one, I'll strat with the actual one.
I want to build a website that is simple and that is mostly out off pictures. Those pictures are set so resize automaticly between 1280px and 640px - that works fine.
BUT now I want to have a div that slides in above each picture once you hover above it.
The sliding in can be archived with css or java that I know, the problem is that the div with the text does not resize as the picture does. In other words putting it to 100% height and 100% width doesn't fix it to the picture size. Is there a way to have it always the same size as the picture below it?!
Right now the height is set to 360px because thats how I left it but here is the link to my testpage so you can take a look at what I mean.
www.panorama-publishing.de/theme-dev
thank you in advance! let me know if you need more detail.
Why don't you resize the div containing the picture and not the other div (call it overlay, if you will). Then you can set the picture to be 100% of the parent div and the overlay can slide from top to bottom and be as big as the entire screen, if you are lazy. As long as you set oveflow: hidden; to the parent element, everything will be just great. This is what I mean:
JSFIDDLE
I've came across this problem when struggling with bigg css libraries and elements that are sometimes hard to style around.
This jQuery solution have helped me where I basicly make the width of an element follow an width of a target element width.
function resize_follower() {
$(".follower").width($(".some-size").width());
}
$(window).resize(function () {
resize_follower();
});
$(document).ready(function () {
resize_follower();
});
Example fiddle here
I currently have an image in a div that's set to fixed, and I like how its behaving, however I want it also to behave as if it's absolute when scrolling up and down. So in other words, I want fixed behavior horizontally, but absolute vertically (so that I add content to it and can scroll down and see the whole image).
Hopefully, I'm clear. Heres my html:
<div id="graphpaper">
<img src="Background2.jpg" />
</div>
My css:
#graphpaper{
position:fixed;
left:50%;
margin-left:-800px;
width:1600px;
height:1600px;
z-index:-10;
}
This is not an easy topic. The only way to achieve it is to use javascript. You have to 2 ways to do this.
Use position fixed and hook to windows scroll event and change the vertical position with javascript on scroll
Use position absolute (so the image scrolls with the window) and again with javascript on horizontal scroll change the horizontal location.
A basic example (it won't work, but this is what you need to start with):
$(window).scroll(function(){
$('#fixedImage').css('top', $(window).scrollTop());
});
Thanks for your help. I found the solution: This essentially will move the fixed div up (notice the negation sign in front of scrollVar) which will resemble an absolute scrollable behavoir.
$(document).ready(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal >= 0) {
$('#graphpaper').css({'position':'fixed','top' :-scrollVal});
}
});
});
I have a top menu bar that is in position fixed and contains some text. When the screen is resized smaller it compresses and it's height increases to fit the text.
I have a div below the top menu bar that contains my website content, moved down using padding-top.
When the top menu bar resizes the top of the article gets covered by the height change of the top menu bar.
#topmenubar{position:fixed;width:100%;text-align:center;word-wrap:normal;}
#content {padding-top:40px;}
What is the best way around this so the resized top menu bar does not cover my content?
The Top menu bar has to always be visible at the top of the screen, so I guess how can I make the padding-top get bigger with the screen width getting smaller or another solution?
Pure JavaScript solution (no jQuery required):
window.onresize = function() {
document.getElementById("content").style.paddingTop = document.getElementById("topmenubar").offsetHeight;
};
jquery
$(window).resize(function(){
var h = $("#topmenubar").height();
$("#content").css("padding-top",h+"px");
});
You can get around this by removing width 100% to some fixed pixel width so that top menubar will not resize,
or at some extent by min-width property.
Here is my html work. http://jsfiddle.net/awaises/remqf/4/
I want to push the fixed div box to bottom of the screen. But it is overlapping on the left navigation and last items of the navigation getting hide behind the green box. Can we fix the green box as per following design? But we have to make sure that green box must be at the bottom of the screen even window’s resolution is small or large.
Design layout URL
http://www.thewebmakerz.com/screen.jpg
Does this .left-col{ height:500px;} fix your problem?
See this fiddle.
Three key tips:
Put "left-footer" in a different parent then your menu content (called "left-col-top").
"left-col-top" should be transparent, "position:fixed", with "z-index:1" and a min-height that is taller than your menu.
"left-footer" should be "position:absolute."
Looking at screen 1.1, if there is 11th list in yellow box, it will definitely go behind green box. (Also consider toolbars / menu bars in browsers). You may have to use something like "More Links >" in case height of screen is less.
Screen 1.2 and onwards:
If jQuery is an option, you can use scrollTop function.
Initially, let the green-box be fixed with position:fixed and some margin negative from bottom.
Then, when user scrolls to a particular amount (as seen in screen 1.2) try following jQuery code:
var yellowBoxHeight = $("div.yellow-box").height();
$document.scroll(function() {
if ($document.scrollTop() >= yellowBoxHeight - 100) {
// If user has scrolled some amount, eg. 100 pixels of yellow box is still visible
// make the green box animate & let it come upwards
} else {
// put the green-box back with some negative margin into the bottom
}
});