寬度更改 - 粘滯分區

我已經實現了一個粘性聯繫表單，它很好用。但有一個惱人的功能，它改變了寬度。我已經嘗試了各種各樣的寬度屬性，例如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

寬度更改 - 粘滯分區

回答

相關問題