Question

我正在学习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

<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会向下滚动滚动条，但是当发生这种情况时，包含“This is content”的div正在取代它，我想避免它。我可以在div中添加一些属性来解决这个问题吗？我可能会在这里遗漏一些微不足道的东西。但我无法找到它。谢谢你的帮助。

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

Answer 1

在这里，我根据滚动位置改变了一些东西。

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

Answer 2

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

});

Answer 3

试试这个小提琴

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

CSS，Jquery：在滚动期间添加类

3 个答案: