2

我正在学习 jquery，但我被这个addClass功能困住了。在滚动期间，我添加了一个类，该类将侧边栏 div 更改为具有固定定位，它被取消流动并且右侧的内容（侧边栏和右侧的内容都已float:left设置。）正在取而代之。但是，我想避免这种情况。我希望右侧的内容保持在原位并滚动侧边栏。这是html和css：

依赖项

<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>
    <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>

在滚动侧边栏时，div 会随着滚动条向下滚动，但是当发生这种情况时，包含“这是内容”的 div 正在取而代之，这是我想避免的。我可以向 div 添加一些属性来解决这个问题吗？我可能在这里遗漏了一些微不足道的东西。但我找不到它。谢谢您的帮助。

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

4

3 回答 3

1

在这里，这是我用来根据滚动位置更改某些内容的方法。

$(function(){
    $(window).scroll(function() { 
        if ($(this).scrollTop() > 150) { 
            a.addClass("fixed-sidebar"); 
        } 
        else {     
            a.removeClass("fixed-sidebar"); 
        }  
    });
});
于 2013-08-02T04:44:44.590 回答
1

检查以下 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");
      }
  }

});
于 2013-08-02T04:52:04.500 回答
1

试试这个小提琴

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;
}
于 2013-08-02T05:37:33.763 回答