Question

我有一个问题仍然无法解决Stack中已经提出的任何问题。

我有一个粘性的标头，当我移动但找不到解决方案时会跳转。

我留下代码：

HTML

ClientID

JS：

SELECT * 
FROM Clients

AND 

SELECT First History Row 
FROM History 
WHERE History.ClientID = Clients.ClientID

AND 

SELECT Last Action Row 
FROM Actions 
WHERE Actions.ClientID = Clients.ClientID

CSS：

<header class="container-fluid" id="myHeader">

    <div class="container">

        <div class="row" id="encabezado">

        <!--Here is a button that makes SlideToggle and shows content. Important to know so that elements do not overlap when you scroll and click on the button-->

        </div>

    </div>

</header>

Answer 1

逻辑很简单，当您的导航“固定”时，其高度会从主容器的高度中减去，从而导致尺寸减小。

例如，假设您的导航栏高度为100px。如果您的导航栏获得了.sticky类，则您的“内容”将丢失100px，从而导致您感到跳跃。

为了避免这种情况，您需要在使导航类具有粘性的同时，还必须为您的内容区域提供一个具有padding-top：100px的类，因此，空间量'被带走”，因此不会感觉到明显的跳跃。

在那之后，为了使过渡更加平滑，您需要定时将粘滞类添加到导航栏与内容相遇的精确偏移处。

更新：代码示例

根据您提供的信息（这是代码的一部分示例），尚不清楚您将在其余内容中使用哪个元素（不计算标题），我将假定此元素是class =“ content “和id =“ myContent”

CSS

.content.top-padding { padding-top: 100px; }

JAVASCRIPT

// When the user scrolls the page, execute myFunction window.onscroll = function() {myFunction()}; // Get the header var header = document.getElementById("myHeader"); // Get the content area var content = document.getElementById("myContent"); // Get the offset position of the navbar var sticky = header.offsetTop; // Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position function myFunction() { if (window.pageYOffset > sticky) { // here you add sticky -> also add top padding header.classList.add("sticky"); header.classList.add("top-padding"); } else { // here you remove sticky -> also remove top padding header.classList.remove("sticky"); header.classList.remove("top-padding"); } }

滚动时粘性页眉跳

1 个答案: