寬度變化-粘性Div

Question

我已經實施了一個粘性聯系表格，效果很好。 但是有一個令人討厭的功能，它可以改變寬度。 我嘗試了各種寬度屬性，例如自動，繼承，初始，但是仍然無法使寬度保持不變，因為它開始向下滾動！

這是Javascript

<!-- Javascript Files -->
<script type="text/javascript">
$(window).load(function(){
$(function() {
  var a = function() {
    var b = $(window).scrollTop();
    var d = $("#scroller-anchor").offset().top;
    var c=$("#scroller");
    if (b>d) {
      c.css({width:"initial",position:"fixed",top:"30px"})
    } else {
      if (b<=d) {
        c.css({width:"100%",position:"relative",top:""})
      }
    }
  };
  $(window).scroll(a);a()
});
});//]]> 
</script>

這是滾動條div：

<div id="scroller-anchor"></div> 
  <div id="scroller" style="margin-top:10px;"> 

下面有聯系表，但示例代碼不需要聯系表！

任何幫助都將是巨大的，為此花費了很長的時間而沒有成功！

Answer 1

我們將存儲聯系表單的初始寬度，並在滾動並且div固定定位后分配相同的寬度。

<script type="text/javascript">
$(window).load(function(){
    $(function() {
      var a = function() {
        var $win = $(window);
        var b = $win.scrollTop();
        var d = $("#scroller-anchor").offset().top;
        var c=$("#scroller");

        //store initial width
        var init_width = c.width();

        if (b>d) {
          c.css({width:init_width,position:"fixed",top:"30px",right:($win.width()-c.offset().left-init_width)})
        } else {
          if (b<=d) {
            c.css({width:"auto",position:"relative",top:"auto",right:"auto"})
          }
        }
      };
      $(window).scroll(a);a()
    });
});//]]> 
</script>

關於此的注意事項：每當瀏覽器的寬度改變時，都需要重新調整它，並且如果用戶滾動然后將瀏覽器窗口的大小調整為較小，則可能會覆蓋內容。