Question

我的目标是通过点击元素向下/向上滑动div。我希望当div向下/向下滑动时，下面的内容也向下/向上移动。我还希望在滚动页面时保持div不变。

这是我的尝试...

HTML：

 <div id="slidebox">Some content</div>
 <div id="wrap">Some content <input type="button" id="btn" value="Show Div"></div>

CSS：

#slidebox{
 height:100px;
 display:none;
 position:relative;
 background:red;
}

#wrap{
 height:1000px;
 background:green;
 position:relative;
}

#btn{
 position:absolute;
 top:100px;
 left:0px;
}

JQuery的：

  $("#btn").click(function(){
                 if ($("#slidebox").is(":hidden")){
                     $("#slidebox").slideDown(1500);
                 }else{
                     $("#slidebox").slideUp(1500);
                 }                  
            });

我实现了第一个目标。 wrap推送slidebox。但是当页面滚动时，slidebox不会保持固定。我尝试更改divs上的position属性，但它们开始出现不良行为。我能做些什么来达到欲望的效果呢？谢谢。

Answer 1

如果顶部的滚动位置大于x，则可以添加一个类，该类会将position: fixed;添加到#slidebox元素：

$("#btn").click(function() {
  if ($("#slidebox").is(":hidden")) {
    $("#slidebox").slideDown(1500);
  } else {
    $("#slidebox").slideUp(1500);
  }

});
$(window).scroll(function() {
  $("#slidebox").toggleClass('fixed', $(window).scrollTop() > 10);
})

#slidebox {
  height: 100px;
  display: none;
  position: relative;
  background: red;
  z-index: 1;
}

#slidebox.fixed {
  position: fixed;
  top: 0;
  width: 100%;
}

#wrap {
  height: 1000px;
  background: green;
  position: relative;
}

#btn {
  position: absolute;
  top: 100px;
  left: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slidebox">Some content 1</div>
<div id="wrap">Some content 2<input type="button" id="btn" value="Show Div"></div>

Answer 2

我正在使用chrome查看此内容。当我滚动时，您是否希望我能够关闭div？

   <head>
        <script src="js/currentjquery.js"></script>
        <script>
            $(window).scroll(function() {
                if ($(this).scrollTop() > 200) {
                    $('#slidebox').css({
                        'display' : 'none'
                    });
                }
            });
        </script>
        <style>
            #slidebox {
                height: 100px;
                display: none;
                position: relative;
                background: red;
            }

            #wrap {
                height: 1000px;
                background: green;
                position: relative;
            }

            #btn {
                position: absolute;
                top: 100px;
                left: 0px;
            }
        </style>
    </head>
    <body>
        <div id="slidebox">
            Some content
        </div>
        <div id="wrap">
            Some content 2
            <input type="button" id="btn" value="Show Div">
        </div>
        <script>
            $("#btn").click(function() {
                if ($("#slidebox").is(":hidden")) {
                    $("#slidebox").slideDown(1500);
                } else {
                    $("#slidebox").slideUp(1500);
                }
            });

        </script>

    </body>
</html>

Answer 3

@Ionut的复制答案。给他/她的信用：）

＆＃13;

$("#btn").click(function() {
  if ($("#slidebox").is(":hidden")) {
    $("#slidebox").slideDown(1500);
    $(".slidebox-wrapper").slideDown(1500);
  } else {
    $("#slidebox").slideUp(1500);
    $(".slidebox-wrapper").slideUp(1500);
  }

});
$(window).scroll(function() {
  $("#slidebox").toggleClass('fixed', $(window).scrollTop() > 10);
})

＆＃13;

.slidebox-wrapper {
  height: 100px;
  display: none;
}

#slidebox {
  height: 100px;
  display: none;
  position: relative;
  background: red;
  z-index: 1;
}

#slidebox.fixed {
  position: fixed;
  top: 0;
  width: 100%;
}

#wrap {
  height: 1000px;
  background: green;
  position: relative;
}

#btn {
  position: absolute;
  top: 100px;
  left: 0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidebox-wrapper">
    <div id="slidebox">Some content 1</div>
</div>
<div id="wrap">Some content 2<input type="button" id="btn" value="Show Div"></div>

＆＃13;

slideDown（）使用固定div并推送其余内容

3 个答案: