CODEWITHSUNDEEP
csshtmlsidebar
sinθ
sinθ

Reputation: 11493

How to fix fixed sidebar side effect?

I followed a tutorial/instructions online to make a sidebar fixed position by making the sidebars position "fixed" and it worked fine. Now I realize that since my page has a min-width attribute, when the user scrolls sideways the content that doesn't move moves into the sidebar. So basically, I'm looking for a way to produce a fixed sidebar when your scrolling down, but when you move sideways the content doesn't jump into the sidebar. My code is kind of like the following:

CSS

#sidebar {
    position:fixed;
    height:500px;
    width: 100px;
    background-color: blue;                    
}
#content {
    width:100%;
    box-sizing:border-box;
    margin-left:100px;
    background-color:purple;
}

​ Html

<div id="sidebar">
</div>
<div id="content">
</div>

​

JSFiddle: http://jsfiddle.net/znCF3/1/

NOTE: This is not my actually code but a minified version of it because my code is really complex. Also, I can't just use a fluid layout.

Upvotes: 0

Views: 6675

Answers (3)

Fewfre
Fewfre

Reputation: 1509

As said by others, not possible with only css and html. However, you can do this with javascript/jquery.

Just encase you want to use jquery to do this, first as watson said, change index of side bar (I had to make negative), just encase it jquery doesn't work for whatever reason for someone.

Then add to your <head>:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
<!--
$(document).ready(function() {

    $(window).scroll(function(){ 
        var offSet = - ($(this).scrollLeft());
        $('#sidebar').css('left', offSet);
    });
});
//-->
</script>

Example

Upvotes: 1

HMartch
HMartch

Reputation: 728

Check out this fiddle: http://jsfiddle.net/NfKca/

Modified css as: 

#sidebar {
    position:fixed;
    height:500px;
    width: 100px;
    background-color: blue;                    
}
#content {
    box-sizing:border-box;
    background-color:purple;
    position:absolute;
    left:100px;           
}

Upvotes: 1

dezman
dezman

Reputation: 19358

You could set the z-index: 1; on the sidebar. If this doesn't help, it would be great if you could make a jsfiddle to illustrate what you mean more.

Upvotes: 0

Related Questions