locked
Div element's position: fixed doesn't work right. RRS feed

  • Question

  • User1769015664 posted

    In the code below, the DIV element <div id="main"> will not scroll as intended when page is scrolled up and down. But, scrollin down moves the apge on top of the contents of <div id="main">.

    What I really need is that everything above </hr> to stay on top of the page and everything below <hr> to scroll without affecting contents of <div id="main">

    <style>
        #main
        {
        ;
        top: 0px;
        left: 0px;
        height: 110px;
        width: 691px;
        }
    </style>
    
    <body class = "body">
    
        <form id="form2" class="body" runat="server" > 
            <asp:ScriptManager ID="ScriptManager2" runat="server"></asp:ScriptManager>
    
            <h1 style="display: inline; color: white;"></h1>
    
            <div id="main"> 
                <img alt="" src="images/MyLogo.png" />&nbsp;&nbsp; My Test Site
                <button type="button" id="btn_Cust">Add Customer</button>
                <asp:Button ID="Button13" class="button" runat="server" Text="Upload Products" />
                <asp:Label ID="Label1" runat="server" Text="User"></asp:Label>
            </div>
           <hr />
    
                <div style='text-align:right; border:none'>
                    <div></div>
                    <div id ="SocialMedia_Images1" style="right: 0px;">
                        <a href="https://www.facebook.com/pages/Shame_on_FaceBook/119687538078795?sk=wall" >
                        <img src="images/fb.jpg"/> </a>
                    </div>
                </div>            
              
    
            <div id="somediv"></div>
    
            <div class="container-fluid">
                <div class="first">
                        <div class="row">
    
                    <div class="col-lg-4">
                        <div id="div1" class="nd-box">
                                <button id="Button14" class="button;" runat="server">
                                    <span id="span5" runat="server">Button 1 </span>
                                </button>
                            <p id="p1" runat="server">
                            </p>
                            <center>
                                <button id="Button15" class="button" runat="server" onserverclick="View">
                                    <span id="span7" runat="server">Open Customer</span></button> 
                            </center>
                        </div>
                    </div>
    
                    <div class="col-lg-4">
                        <div id="div1A" class="nd-box">
                                <button id="Button16" class="button;" runat="server">
                                    <span id="span8" runat="server">Button 2 </span>
                                </button>
                            <p id="p2" runat="server">
                            </p>
                            <center>
                                <button id="Button17" class="button" runat="server" onserverclick="View2">
                                    <span id="span9" runat="server">Open Merchant</span></button> 
                            </center>
                        </div>
                    </div>
    
                    <div class="col-lg-4">
                        <div id="nd-boxA" class="nd-box">
                                <button id="Button18" class="button; " runat="server">
                                    <span id="span10" runat="server">Button 2A </span>
                                </button>
                            <p >
                                <asp:Literal ID="Literal1" Mode="PassThrough" runat="server"></asp:Literal>
                            </p>
                            <center>
                                <button id="Button19" class="button" runat="server" onserverclick="View3">
                                    <span id="span11" runat="server">Open Manufacturer</span></button> 
                            </center>
                        </div>
                    </div>
    

    Monday, September 28, 2020 4:47 AM

Answers

  • User1535942433 posted

    Hi NJ2,

    Accroding to your desciption and codes,I have created a test and the div main are on the top when scrolling but the content will cover the main.

    You could use z-index on the div main.Just like this:

    <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <style>
            #main {
                ;
                top: 0px;
                left: 0px;
                height: 110px;
                width:100%;
                z-index: 999;
                background-color:lightblue;
            }
    
            #content {
                margin-top:110px;
                overflow: hidden;
            }
        </style>
    
    
        <asp:ScriptManager ID="ScriptManager2" runat="server"></asp:ScriptManager>
    
                <h1 style="display: inline; color: white;"></h1>
    
    
                <div class="container">
                    <div id="main">
                        <img alt="" src="image/image6.jpg" />&nbsp;&nbsp; My Test Site
                    <button type="button" id="btn_Cust">Add Customer</button>
                        <asp:Button ID="Button13" class="button" runat="server" Text="Upload Products" />
                        <asp:Label ID="Label1" runat="server" Text="User"></asp:Label>
                    </div>
                    <hr />
                    <div id="content">
                          <div style='text-align: right; border: none'>
                        <div></div>
                        <div id="SocialMedia_Images1" style="right: 0px;">
                            <a href="https://www.facebook.com/pages/Shame_on_FaceBook/119687538078795?sk=wall">
                                <img src="image/image6.jpg" />
                            </a>
                        </div>
                    </div>
                    <div id="somediv"></div>
                    <div class="first">
                    <div class="row">
    
                        <div class="col-lg-4">
                            <div id="div1" class="nd-box">
                                <button id="Button14" class="button;" runat="server">
                                    <span id="span5" runat="server">Button 1 </span>
                                </button>
                                <p id="p1" runat="server">
                                </p>
                                <center>
                                    <button id="Button15" class="button" runat="server">
                                        <span id="span7" runat="server">Open Customer</span></button> 
                                </center>
                            </div>
                        </div>
    
                        <div class="col-lg-4">
                            <div id="div1A" class="nd-box">
                                <button id="Button16" class="button;" runat="server">
                                    <span id="span8" runat="server">Button 2 </span>
                                </button>
                                <p id="p2" runat="server">
                                </p>
                                <center>
                                    <button id="Button17" class="button" runat="server">
                                        <span id="span9" runat="server">Open Merchant</span></button> 
                                </center>
                            </div>
                        </div>
    
                        <div class="col-lg-4">
                            <div id="nd-boxA" class="nd-box">
                                <button id="Button18" class="button; " runat="server">
                                    <span id="span10" runat="server">Button 2A </span>
                                </button>
                                <p>
                                    <asp:Literal ID="Literal1" Mode="PassThrough" runat="server"></asp:Literal>
                                </p>
                                <center>
                                    <button id="Button19" class="button" runat="server">
                                        <span id="span11" runat="server">Open Manufacturer</span></button> 
                                </center>
                            </div>
                        </div>
                    </div>
                </div>
                    </div>
              
               </div>

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 29, 2020 5:45 AM