Question

我已经实施了一个粘性的联系表单，效果很好。但是有一个烦人的功能，它改变了宽度。我已尝试过各种宽度属性，例如auto，inherit，initial但仍然无法设置宽度保持不变，因为它开始向下滚动！

这是Javascript

for example: query(nil, :offset => {:x => 50, :y => 50})

这是滚动条div：

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

下面是联系表单，但示例代码不需要！

任何帮助都会很棒，在这方面花了很长时间没有成功！

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>

注意事项：在浏览器的宽度发生变化时，需要重新调整它，如果用户滚动，然后将浏览器窗口的大小调整为较小，则可以检查内容。

宽度变化 - Sticky Div

1 个答案: