如何修复页面滚动时的对象宽度

当页面滚动时，需要保持对象位于顶部。我在How to keep object on page scrolling with the top of the page上找到了这个例子。但是当页面滚动时，对象改变宽度。有人可以帮助我如何解决问题。在此先感谢如何修复页面滚动时的对象宽度

当页面加载;它在fieldset中的对象。 enter image description here

滚动页面后，对象改变宽度。 enter image description here

有我的代码：

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb"  
    Inherits="myProject.WebForm2" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
     Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"> 
    <title></title> 

    <script language="javascript" src="/include/jquery.js" type="text/javascript"></script> 
    <style type="text/css"> 

     #scroller { 
      position: relative; 
      top: 0px; 
      width: 90%; 
      background: GREY; 
      height: 120px; 
      } 

     .fixed { 
     position: fixed !important; 
      /*zoom:1; /* This enables hasLayout, which is required for older IE browsers */ 
     top: 0px !important; 
     } 
</style> 

    <script type="text/jscript"> 

    $(window).scroll(function() { 
     if ($(window).scrollTop() > 100) { 
      $('#scroller').addClass('fixed'); 
     } else { 
      $('#scroller').removeClass('fixed'); 
     } 
    }); 

    </script> 


</head> 

    <body id="bdypopup" > 
    <form id="Form2" runat="server"> 
     <div id="mainpopup" style="width:90%;"> 
      <fieldset class="fldBoxy " style="background-color:Red;">    

       <legend class="fldLegend" >Edit Order      
       </legend>     
       <div id="scroller"> 
       <asp:Label ID="lblYear" runat="server" Text="TESTING"></asp:Label> 
       <table width="98%" > 
       <tr> 
       <td width="65%"> <asp:HiddenField ID="hdUnCheckRow" runat="server" /> </td> 
       <td> 
        <asp:CheckBox ID="chkOne" runat="server" Text="Show One" Checked="true" Visible="true" /> 
        <br /> 
        <asp:CheckBox ID="ChkTwo" runat="server" Text="Show Two" checked="true" Visible="true"/> 
        <br /> 

        </td> 
       </tr> 
       </table> 

       <div > 

        <asp:button id="btnSave" runat="server" text="Save" causesvalidation="true" OnClientClick="enableButton()" UseSubmitBehavior="false" />&nbsp;     
        <button id="btnCancel" type="button" runat="server" onclick="closeWindows()">Cancel</button> 

       </div> 
       </div> 
       <asp:Literal ID="ltr" runat="server" /> 
       </fieldset> 
</div> 
</form> 
</body> 
</html>

来源

2014-12-13 user819774

Demo

$(window).scroll(function() { 
      var wid = $('#scroller').outerWidth(); 
      if ($(window).scrollTop() > 100) { 
       $('#scroller').addClass('fixed').css('width', wid); 
      } else { 
       $('#scroller').removeClass('fixed'); 
      } 
     });

，并提高你的代码

$(document).ready(function(){ 
    $(window).on('scroll',function() { 
      var wid = $('#scroller').outerWidth(); 
      if ($(window).scrollTop() > 100) { 
       $('#scroller').addClass('fixed').css('width', wid); 
      } else { 
       $('#scroller').removeClass('fixed'); 
      } 
     }); 
});

来源

2014-12-13 01:04:58

感谢。我工作了。 – user819774 2014-12-15 14:32:47

@ user819774祝你好运 – 2014-12-15 15:52:15

如何修复页面滚动时的对象宽度

回答

相关问题