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.
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 position: sticky; 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 position:fixed).
ASP.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today. Learn more >
ASP.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today. Learn more >
Member
29 Points
133 Posts
Keep layout view from Scrolling
Aug 25, 2020 08:49 PM|Baze72|LINK
Is there a way to keep the _Layout view from scrolling? Similar to a table:
position: sticky;
Thanks!
Contributor
3040 Points
864 Posts
Re: Keep layout view from Scrolling
Aug 26, 2020 03:08 AM|YihuiSun|LINK
Hi Baze72,
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 position: sticky; 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 position:fixed).
<style> .testfixed { position: sticky; top: 50px; } </style> <div class="testfixed"> <h2>test</h2> </div>Here is the result.
Best Regards,
YihuiSun
Member
29 Points
133 Posts
Re: Keep layout view from Scrolling
Aug 26, 2020 01:43 PM|Baze72|LINK
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;position: absolute; 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>Contributor
3040 Points
864 Posts
Re: Keep layout view from Scrolling
Aug 27, 2020 11:14 AM|YihuiSun|LINK
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