相关疑难解决方法(0)

我正在通过AJAX加载元素.只有向下滚动页面时,其中一些才可见.
有什么方法我可以知道一个元素现在是否在页面的可见部分？

一旦我滚动到它,我想让导航栏坚持到顶部,但它不起作用,我不知道为什么.如果可以请求帮助,这是我的HTML和CSS代码:

.nav-selections {
        text-transform: uppercase;
        letter-spacing: 5px;
        font: 18px "lato",sans-serif;
        display: inline-block;
        text-decoration: none;
        color: white;
        padding: 18px;
        float: right;
        margin-left: 50px;
        transition: 1.5s;
    }

        .nav-selections:hover{
            transition: 1.5s;
            color: black;
        }

    ul {
        background-color: #B79b58;
        overflow: auto;
    }

    li {
        list-style-type: none;
    }

<nav style="position: sticky; position: -webkit-sticky;">
        <ul align="left">
            <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
            <li><a href="#/about" class="nav-selections">About</a></li>
            <li><a href="#/products" class="nav-selections">Products</a></li>
            <li><a href="#" class="nav-selections">Home</a></li>
        </ul>
    </nav>

我有一个div,当我的页面第一次加载时,它从顶部约100px(它为页面保留一些按钮等).

当用户滚过它时,我希望div"跟随"用户,因为它附着在屏幕顶部.当用户返回页面顶部时,我希望它回到原始位置.

Visualization - xxxxx is the div:

Default (page load)          User vertically scrolled well past it
---------                    ---------
|       |                    |xxxxxxx| < after div reaches top of screen when
|xxxxxxx|                    |       |   page is scrolled vertically, it stays
|       |                    |       |   there
---------                    ---------

还好这里有什么,我想问问,的导航栏的例子今日美国.

我正在使用bootstrap词缀.这是我的代码

<div class="header">
  <div class="header-1">
    <h1>this is some logo</h1>
  </div>
  <div class="header-2">
    <h3>this is some heading</h3>
  </div>
</div>
<div class="content" style="height:2500px;">
</div>
<div class="footer">
    this is a footer
</div>

JavaScript的

$('.header-2').affix({
});

如何将div header-2固定在顶部,(当有一些滚动并且div header-2只是到达顶部位置时)我之前提到过的网站？

我很乐意看到header-1和header-2,但是一些滚动应该隐藏header-1并坚持header-2到最顶端.

谢谢

我一直爱着position: sticky。它无需求助于 JavaScript 即可解决大部分（如果不是全部）问题。但是，我已经碰壁了。我需要制作一个嵌套在几个元素内的元素<div>以使其具有粘性。我们知道是和position: sticky的混合，因此它将锚定到它的第一个父级。position: relativeposition: fixed

来自MDN：

元素按照文档的正常流程定位，然后相对于其最近的滚动祖先和包含块（最近的块级祖先）进行偏移

在这种情况下，我想让标题相对于窗口而不是容器具有粘性。HTML 使我很难在嵌套之外重组它<div>

如果没有 JavaScript，这可能吗？

这是代码：

<div class="attendance">
<!-- Here's the header I want to make sticky to the window, and not to div.attendance-->
    <header class="text-center sticky">Monday 11/22/2019</header>
<!-- Header above -->
    <div class="date-config">
        <div class="form-group">
            <input type="checkbox" id="workable" /> No Work<br />
        </div>

        <div class="form-group">
            <label for="notes">Notes:</label>
            <textarea id="notes" class="form-control"></textarea>
        </div>
        <label for="markall">Mark all as>
        <select id="markall" class="form-control">
            <option></option>
            <option>Absent</option> …

请看看这个小提琴.代码是巨大的发布.

我试图让两个DIVS坚持到顶部并留在动态更新的DIV内.它正在工作,但在DIV内部正在发生闪烁.如何消除闪烁.

请帮帮我.

编写的代码修复:

 colFix.style.left = (holder.scrollLeft - view.offsetLeft) + "px";
 heaF.style.top = (holder.scrollTop - view.offsetTop) + "px";