宽度更改 - 粘滞分区

我已经实现了一个粘性联系表单，它很好用。但有一个恼人的功能，它改变了宽度。我已经尝试了各种各样的宽度属性，例如auto，inherit，initial，但仍然无法设置宽度以保持不变，因为它开始向下滚动！宽度更改 - 粘滞分区

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

有低于此的联系方式，但不是需要的示例代码！

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

来源

2015-08-25 Frog82

可以使用更多的信息 - 例如，如果您使用的粘性表单是其他工具的一部分，我很好奇，如果是这样，查看该工具的代码以便我们可以有所帮助找出是什么让它改变了滚动宽度。你有这样的一个活生生的例子吗？ –

它可以是任何东西，我刚刚测试过一个高度为100px和蓝色背景的随机div。它目前只有一个本地版本@JamesPederson – Frog82

当你尝试宽度作为继承，是父母的“滚动”？如果是这样，你有没有给任何宽度？ – Chitrang

我们将存储联系表格的初始宽度，并且一旦您滚动并且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>

注：这将需要随时调整的浏览器变化的宽度，并可能走了过来，如果用户滚动内容，然后重新调整浏览器窗口较小。

来源

2015-08-25 23:06:07

这很棒！谢谢詹姆斯！ – Frog82

宽度更改 - 粘滞分区

回答

相关问题