Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Using JS CSS to set position causes different outcome than the same setting using pure CSS

Using JS CSS to set position causes different outcome than the same setting using pure CSS

Problem

Here is a fiddle to demonstrate the problem:

http://jsfiddle.net/6e1vg58L/

The javascript adds the "position:fixed" to the nav-content. Everything works how I want, the nav content stays in place while scrolling down the page. Now, if you go and put "position: fixed" under "#nav-content" in the CSS, and delete the JS, it should have the same outcome, correct?

For some reason setting the position in CSS or HTML causes the entire cell to dissapear, while setting it using Javascript or any browser inspector gives it the desired output?

$(document).on("scroll", function(){
    if($(window).scrollTop() > 0)
    {
        $("#nav-content").css("position","fixed");
    }
    else
    {
        $("#nav-content").css("position","relative");
        $("#nav-content").css("top",0);
    }
});

vs

#nav-content {
    position: fixed;
}

At first I thought it could be something with the listener causing it to work (but why?), but after opening it up in a live browser and adding the "position: fixed" through the inspector, it works exactly how it should. This is the problem, two out of four ways give the same, desired result, but the other two give the same, undesired result.

Problem courtesy of: Programmer XYZ

Solution

Although I am not 100% on the exact whys I think the reason is because by declaring it fixed has the following effect.

fixed
Do not leave space for the element. Instead, position it at a specified position

so it means content being 100% is allowed to take the whole screen when the page is first rendered. Navigation (although not the one being fixed which is the confusing bit) is on the screen but hidden by the content at 100%. the interesting thing is if you use chrome to disable the fixed property the navigation appears and then because it is now on screen reapplying the position fixed does not hide it which is why the JS route behaves differently.

the changes to fix could defining the initial widths in % relative to each other.

#content {
    position: relative;
    background-color: #eee;
    width: 70%;
    max-width: 1300px;
    min-width: 450px;
    height: auto;
}

and then the same for navigation

#navigation {
    width: 30%;
    background-color: #000;
    height: 100%;
    position: relative;
    top: 0;
    bottom: 0;
}

http://jsfiddle.net/vemtyyox/

another way to keep the navigation at 300px could be to use calc to define the width of the content

#content {
    position: relative;
    background-color: #eee;
    width: calc(100% - 300px);
    max-width: 1300px;
    min-width: 450px;
    height: auto;
}

#navigation {
    width: 300px;
    background-color: #000;
    height: 100%;
    position: relative;
    top: 0;
    bottom: 0;
}

http://jsfiddle.net/9db77jvp/

Looking closer i think there is something odd about the way display:table-cell and the fixed properties are working, maybe.

Solution courtesy of: Quince

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Using JS CSS to set position causes different outcome than the same setting using pure CSS

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×