In my webpage a division in the left hand side should be fixed in a particular position.I am using position:fixed;top:150px;left:0px;. So now even we scrolldown the page the division will not change from the current position.
But here i am facing a problem. If am scrolling down the page 150px or more i am getting the white space of 150px at the top of that left hand side division.
So what my requirement is if am scrolling down the page 150px or more then the css of that left hand side division should be changed to position:fixed;top:0px;left:0px; and as well as when i am going to top of the page again the css should change to position:fixed;top:150px;left:0px;
I came to know that this can't be done with only CSS and we have to use JS along with the CSS. But i don't know how to do that.
Please help me...!!
Thanks in advance,
Sreeram
So based of what you said above you want to have an element follow you down the page but change it's top position after you scroll down a little ways.
I've created a jsfiddle that uses js to add a class to an element once the document is scrolled past 150px. It also removes that class if they scroll back above 150px.
http://jsfiddle.net/KQCRC/
.fix {
position:fixed;
top:150px;
left:0px;
width:100px;
height:100px;
background:#fff;
}
.fix.scrolled {
top:0;
}
Related
I want two side nav bars that are affixed, but when I scroll down, my left navbar column moves to the left side of its parent div.
I know the issue is that affix changes the position to fixed so any floats would be irrelevant.
My issue should be clear in this
http://www.bootply.com/deaSbNAJ0b - don't mind the right side bar
I believe the answer lies in the javascript. My first thought would be to alter the affix function to use the parent element's position to calculate the affixed elements position after it triggers, but I wouldn't know where to start, javascript is still new to me.
Basically this question has already been answered here. As explained in the docs..
Use the affix plugin via data attributes or manually with your own
JavaScript. In both situations, you must provide CSS for the
positioning and width of your affixed content.
So in this case you have to set a specific width for the affixed element. When it becomes position:fixed it's removed from the normal document flow, and won't maintain it's normal percentage-based "unfixed" width.
You'll need to adjust the width for what works best with the other page content, keeping in mind that position:fixed doesn't work responsively with the Bootstrap columns. Here it's applied only on widths greater than 991px so that the columns can stack normally on smaller screens.
#media (min-width: 992px) {
.affix-top {
position: static;
margin-top:10px;
width:240px;
}
.affix {
position: fixed;
top: 10px;
width:240px;
}
}
http://www.bootply.com/FlGXADz2L3
Basically, I'm coding a site and I want to implement a JQuery progress bar, I can get it to appear in my site just perfectly, however if I start scrolling with the position:fixed; the position jumps to hover 1/7th of the way down my page, and therefore after 7 scroll clicks down, it has left the page by the bottom, when I apply the same CSS to an image that have used on this object, the image behaves properly.
Also if I scroll back up to the top, the progress bar will never quite reach where it originally started.
Here is a jsfiddle.
HTML
<div id="progressbar"></div>
CSS
#progressbar {
position: fixed;
top:0;
left:0;
z-index:999;
width:100%;
height:20px;
}
There is a fiddle of my code, however the jQuery script doesn't seem to appear and I haven't used fiddle enough to be able to get it to display properly, so if it is a basic thing I've missed, that would be awesome if it could be pointed out too.
The reason your progressbar doesn't come back to the same position is this:
if (scroll <= 28) {
progressbar.style.top = "30px";
}
You are telling it that once you scroll, if the distance from the top is less than 28px it should go to 30px from the top while it starts at 0. Even if you start by scrolling 1px down it'll jump to 30px.
I'm trying to create an effect where I display a big logo on page load. When the user scrolls pass the logo and navigation, I want to display a fixed nav bar with a smaller logo. I then want to hide the big logo so that when the user scrolls to the top they still see the fixed nav bar (i.e. the big logo and original navigation stay hidden).
However, when I remove a big block element with the .hide() property it causes the page to "jump" as the display:none property gets set. This reduces the usability of the page, as the location jumps the size of the element that was removed, potentially confusing users.
Is there a way I can get the effect I want, while still providing a smooth experience to the user? I've been thinking of potential options, but have been drawing blanks. Hoping you guys can inspire me :)
A simple JS fiddle can be seen here: http://jsfiddle.net/darudude/vA5WG/ (Note: You'll have to increase the result section to 720+px to get it to work properly - I'm still working on the responsive part)
The code in question:
function UpdateTableHeaders() {
var menu = $(".main_nav_menu"),
offset_top = menu.offset().top;
var scrollTop = $(window).scrollTop();
if (scrollTop > (offset_top + menu.height()))
{
$(".clone").addClass("floating_header");
$(".big_logo").hide();
}
}
$(window).scroll(function(){
UpdateTableHeaders();
});
You can try this ,
Add a new style
<style>
.hide {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
</style>
And change your JS to
$(".big_logo").addClass('hide');
Instead of
$(".big_logo").hide();
Use visibility:hidden then
$(".big_logo").css('visibility','hidden');
Maybe it is because a different browser - margin/padding thing. Have you tried to add this to the body element (or to the container element if it inherits some margins/paddings)
body{
margin:0;
padding:0;
width:100%;
}
I am creating a small html file for myself just to try some new things. so far, I have a header, a background, and a center area for content. it is in the center and the position is set as fixed.
I want to make it so when someone scrolls down, the center area will move up. So there wont be large white-space at the top. Also, when they scroll up, so the center is near the top, it wont go over the header.
I"m sure this can be done with JavaScript. But, I'm not too sure how.
I'm sorry if this is unclear.
I recommend using jquery to accomplish this.
You can bind an event listener to the scroll event, the handler is passed an event object with all the information you need to achieve your desired result (scrolltop, pageX, pageY, etc....)
Once you have captured the scroll event, you can tell where the user scrolled to (how far down), and position your div accordingly.
http://api.jquery.com/scroll/
This could be achieved using javascript or Jquery (Jquery being the easiest of the two).
1.) Use arbitrary pixels to define when the div should move.
function scrolling() {
if ($(body).scrollTop() > 120px)
{
....perform div transition...
}
}
OR
2.) Use the position of the target div to define when the div should move.
function scrolling() {
if ($(body).scrollTop() > $("#TargetDiv").offset().top;)
{
....perform div transition...
}
}
If you use the second solution, be sure that you call Jquery and this script after the DOM is loaded i.e. after </body>. Otherwise it won't be able to define the #TargetDiv.
This can be done without use of jquery or javascript, if you are looking to do what I think you are.
http://jsfiddle.net/wN8c8/
by setting your content to a fixed size and setting the content to overflow:auto;
likewise, you could also set your page background-attachment to fixed, and create the illusion that the text is 'appearing' without the page moving. You can certainly go more in-depth with it using scripting, but it really depends on your intention.
z-index will also allow you to build your page in layers, so that you can determine what shows and what is hidden behind other page elements.
body {
background-color:yellow;
}
#header{
position:fixed;
width: 100%;
height:20px;
background-color:red;
z-index:2;
}
#content{
position:fixed;
width:80%;
height:60%;
background-color:#ddd;
overflow:auto;
margin:0px 10%;
z-index:1;
}
<div id="header"></div>
<div id="content">
This is some content.<br/>
This is some content.<br/>
This is some content.<br/>
</div>
Having some trouble with a very basic CSS problem.
I have a container that has a max-height of 655px. Now to the very right of that container is a fixed position container (it must be fixed position due to what I'm doing). The fixed position container has an absurdly large height.
It needs that height because it will be filled with content, that you'll ultimately see by clicking buttons and by some javascript. (changing the scrollTop)
I'm not 100% sure what I'm doing wrong, but I basically need only 655px of the fixed position container to show. I'm not really sure why this doesn't work the way I have it setup.
Check out the JS fiddle here: http://jsfiddle.net/BG2bu/
.tall {
background-color:blue;
position:absolute;
right:0px;
width:200px;
height:5000px;
}
I'm using this CSS to define the tall container. And I know if I change the position to absolute, it will constrain to the max height of it's parent container. I really need this container to be fixed though for other reasons. Is there any possible way to do this? Am I missing something simple here?
If this can be done with a JS/Jquery solution I'm definitely open to that.
Not sure this would be suitable for your needs but I've wrapped the .tall div with another container as position:fixed will not adhere to overflow:hidden in its container div.
http://jsfiddle.net/3DZ53/
Hard to tell if this suits your need or not, but could you...
.tall {
max-height: 655px;
overflow: scroll / hidden;
}