宽度改变-粘Div

Width Changing - Sticky Div

本文关键字：Div 改变      更新时间：2023-09-26

我已经实现了一个粘性联系人表单，它工作得很好。但是有一个令人讨厌的特性，它会改变宽度。我已经尝试了各种各样的宽度属性，如自动，继承，初始化，但仍然不能设法让宽度保持不变，因为它开始向下滚动!

这是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;">

下面有一个联系人表单，但示例代码不需要!

任何帮助将是伟大的，花了这么长时间，没有成功!

我们将存储联系人表单的初始宽度，并在滚动和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>

注意:它需要随时调整浏览器的宽度变化，如果用户滚动，它可能会超过内容，然后将浏览器窗口的大小调整为更小。

相关文章：