Question

我需要在页面滚动时将对象保持在顶部。我在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>

Answer 1

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');
            }
        });
});

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

1 个答案: