locked
Keep layout view from Scrolling RRS feed

  • Question

  • User982203039 posted

    Is there a way to keep the _Layout view from scrolling? Similar to a table:

    position: sticky;

    Thanks!

    Tuesday, August 25, 2020 8:49 PM

All replies

  • User1686398519 posted

    Hi Baze72,

    keep the _Layout view from scrolling

    Because there are common parts on the view, referencing the Layout view does not require writing the same code in each page. Do you mean the public part will not scroll?

    When you create an MVC project, a Layout view is automatically created by default. The Layout view refers to Bootstrap, and the head navigation bar does not scroll. You can find that the navbar-fixed-top style is used.

    <div class="navbar navbar-inverse navbar-fixed-top">
         <div class="container">
            ... ...
         </div>
    </div>

    If you don't want to use Bootstrap, but just want an element to be fixed on the page without scrolling, you can achieve this by setting css.An element with ; is positioned based on the user's scroll position.A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport-then it "sticks" in place (like ).

    <style>
        .testfixed {
              ;
              top: 50px;
        }
    </style>
    <div class="testfixed">
          <h2>test</h2>
    </div>

    Here is the result.

    Best Regards,

    YihuiSun

    Wednesday, August 26, 2020 3:08 AM
  • User982203039 posted

    That is what I need except I have a logo above the navbar and that seems to mess thing up. Any ideas?

     <div class="container" id="topContent">
            <div style="width: 648px; height: 75px; margin-top: 0px;; top: 0;">
                <div>
                    <a href="/Home/" class="navbar-brand"> <img src="~/images/logo.png" width="150" height="50" /></a>
                </div>
            </div>
        </div>
        <div class="navbar navbar-inverse navbar-fixed-top">
    
            <div class="container">
    
                <div class="navbar-header">
    
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
    
                </div>

    Wednesday, August 26, 2020 1:43 PM
  • User1686398519 posted

    Hi Baze72,

    Because the logo image is obscured, you cannot see it. You can try the following code.

    <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="/Home/" class="navbar-brand"> <img src="~/images/logo.png" width="20" height="20" /></a>
                    @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                </div>
            </div>
        </div>

    Here is the result.

    Best Regards,

    YihuiSun

    Thursday, August 27, 2020 11:14 AM