帶固定div的slideDown（）並推動其餘內容

我的目標是通過單擊元素來滑動/向上滑動div。我希望當div向下/向上滑動時，下面的內容也向下/向上移動。我也希望這個div在頁面滾動時保持固定。帶固定div的slideDown（）並推動其餘內容

這裏是我的嘗試......

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上更改位置屬性，但他們開始有不受歡迎的行爲。我該怎麼做才能達到慾望的效果？謝謝。

來源

2017-03-22 João

所以，你希望所有的內容是固定的？還是隻有幻燈片盒？ –

@NiekNijland只有'幻燈片'。 –

那麼，爲什麼你要div下面的內容向下或向上移動，當div是固定的位置？對我來說，這種與固定行爲結合的移動行爲聽起來是不可能的：/ –

您可以在從頂部滾動位置比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>

來源

2017-03-22 12:37:57 Ionut

它的工作原理！謝謝。唯一的問題是'slidebox'的寬度必須設置爲100％。 –

@João，我很高興它適合你。我已將'width：100％'添加到'slidebox'元素。請參閱最新的答案。滾動時，我還爲添加類解決方案添加了簡寫代碼。 – Ionut

將'＃slidebox'元素包裝在相同高度的包裝中。這種方式當你開始滾動頁面時不會跳轉。看到我的回答:) –

我使用的是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>

來源

2017-03-22 12:44:29 user3728073

不，如果用戶再次點擊該按鈕，「幻燈片」將只關閉（slideUp）。感謝你的回答。 –

複製@Ionut的答案。現金給他/她:)

$("#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); 
 
})

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

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

來源

2017-03-22 12:54:17

帶固定div的slideDown（）並推動其餘內容

回答

相關問題