宽度变化-粘性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>

关于此的注意事项：每当浏览器的宽度改变时，都需要重新调整它，并且如果用户滚动然后将浏览器窗口的大小调整为较小，则可能会覆盖内容。