CSS , Jquery: Adding class during scroll

Question

I am learning jquery and I am stuck with the addClass function. During scroll, I am adding a class which changes a sidebar div to have fixed positioning, it is being taken out of flow and the content on the right (both the sidebar and the content on the right have float:left set.) is taking its place. But, I want to avoid that. I would like the content on the right to stay where it is and the sidebar to scroll. Here is the html and css:

Dependencies

<script src="assets/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/reset.css"></link>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css"></link>

Jquery

$(window).scroll(function(){
    var a=$('.sidebar-inner');
    var p=a.offset().top;
    var q=$(window).scrollTop();
    var r=$('.sidebar-inner').parent().offset().top;
    if(p-q<40){
        a.addClass("fixed-sidebar");
    }
    else{ 
        if(p-r<20){
            a.removeClass("fixed-sidebar");
        }
    }
});

CSS

html, body {
    background-color:rgb(229,229,229);
    height:100%;
    margin:0;
    padding:0;
}
.strip {
    min-height:200px;
}
.large-strip {
    min-height:300px;
}
.fixed-sidebar {
    position:fixed;
    top:20px;
}
.sidebar {
    float:left;
    width:270px;
    margin-left:-20px;
    opacity:1.0;
}
.sidebar-inner {
    margin-top:20px;
    width:256px;
}
.sidebar-inner ul {
    list-style:none outside none  border:1px solid black;
}
.sidebar-inner ul li {
    padding:0px 10px;
    border:1px solid;
    line-height:20px;
}
.main {
    margin-top:20px;
    margin-left:10px;
    padding:10px;
    width:200px;
    float:left;
}
.div1 {
    background-color:white;
    height:auto !important;
    min-height: 300%;
    width:auto;
    /*margin:0px auto -40px;*/
    border:1px solid;
}
.div1 .wide {
    display:block;
    border:1px solid black;
}
.div1 .div1_1 {
    width:50%;
    background-color:#fff;
    display:inline-block;
}
.div1 .div1_2 {
    display:inline-block;
    width:50%;
}
.footer {
    min-height:40px;
    border:1px solid black;
}

BODY

<body>
    <div class="div1">
        <div class="div1_1">
            This is div 1_1
        </div><!--
        --><div class="div1_2">
            This div 1_2
        </div>
        <div class="wide strip">
        </div>
        <div class="wide large-strip">
            <div class="container">
                <div class="row">
                    <div class=" sidebar">
                        <div class="sidebar-inner">
                            <ul>
                                <li>Item 1</li>
                                <li>Item 2</li>
                                <li>Item 3</li>
                                <li>Item 4</li>
                                <li>Item 5</li>
                                <li>Item 6</li>
                            </ul>
                        </div>
                    </div>
                    <div class="main">
                        <div class="content">
                            This is content
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p class="test">

        </p>
    </div>
    <div class="footer">
        This is footer
    </div>
</body>

On scrolling the sidebar div scrolls down with scroll bar ,but while this happens the div containing "This is content" is taking its place, which I want to avoid. Can I add some attribute to a div to solve this? I might be missing something trivial here. But I am not able to find it. Thanks for the help.

JSfiddle - http://jsfiddle.net/nAwEz/

" I would like the content on the right to stay where it " - i don't see any "right content" on your html... please clarify — Darkagelink
– Darkagelink, Commented Aug 2, 2013 at 4:35

Dinesh · Accepted Answer · 2013-08-02 06:03:07Z

1

Try this fiddle

http://jsfiddle.net/yTwZz/2

$(window).scroll(function () {
    var a = $('.sidebar-inner');
    var p = a.offset().top;
    var q = $(window).scrollTop();
    var r = $('.sidebar-inner').parent().offset().top;
    console.log(p - q);
    console.log(p - r);
    if (p - q < 40) {
        a.addClass("fixed-sidebar");
        $('#hidden-nav-content').show();
    } else {
        if (p - r < 20) {
            a.removeClass("fixed-sidebar");
            $('#hidden-nav-content').hide();
        }
    }

});

HTML

<div class=" sidebar">
    <div id="hidden-nav-content" style="display:none;float:left;"></div>
    <div class="sidebar-inner">
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
           </ul>
    </div>
</div>

CSS

#hidden-nav-content,.sidebar-inner {
    margin-top:20px;
    width:256px;
}

edited Aug 2, 2013 at 6:03

answered Aug 2, 2013 at 5:37

Dinesh

3502 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bhargav Ponnapalli Over a year ago

Could you please explain the significance of the hidden nav content id? It would be of great help . Thanks in advance.

Dinesh Over a year ago

When the position is changed to fixed, there wont be any element to fill the space occupied the side navigation bar. So I added an hidden element in order to fill it. I changed the hidden element from display:none; to display:block; when the position of the side nav changed.

rjf0909 · Accepted Answer · 2013-08-02 04:44:44Z

1

Here, this is what I use to change something based on scroll position.

$(function(){
    $(window).scroll(function() { 
        if ($(this).scrollTop() > 150) { 
            a.addClass("fixed-sidebar"); 
        } 
        else {     
            a.removeClass("fixed-sidebar"); 
        }  
    });
});

answered Aug 2, 2013 at 4:44

rjf0909

1838 bronze badges

Comments

Arun Bertil · Accepted Answer · 2013-08-02 06:31:03Z

1

check the following JSfiddle

http://jsfiddle.net/nAwEz/1/

$(window).scroll(function () {
  var a = $('.sidebar-inner');
  var m = $('.main');
  var p = a.offset().top;
  var q = $(window).scrollTop();
  var r = $('.sidebar-inner').parent().offset().top;
  if (p - q < 40) {
      a.addClass("fixed-sidebar");
      m.addClass("fixed-main");;
  } else {
      if (p - r < 20) {
          a.removeClass("fixed-sidebar");
          m.removeClass("fixed-main");
      }
  }

});

edited Aug 2, 2013 at 6:31

answered Aug 2, 2013 at 4:52

Arun Bertil

4,6584 gold badges36 silver badges59 bronze badges

1 Comment

Bhargav Ponnapalli Over a year ago

Hmm.. Actually, I want the content to stay at the right. (BTW I changed the width of main because it was little too wide for jsfiddle and it was not showing on the right. Please have a look at this fiddle. jsfiddle.net/nAwEz

Collectives™ on Stack Overflow

CSS , Jquery: Adding class during scroll

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related