【问题标题】:'Position: sticky' un-sticking mid scroll, reason unknown [duplicate]“位置:粘性”不粘中间滚动,原因未知[重复]
【发布时间】:2020-01-08 00:05:21
【问题描述】:

我一直在为一个 uni 项目开发我的第一个网站,在我的 CSS(或我的 HTML,不太确定)中遇到了一个非常奇怪的错误,这意味着我拥有的页面顶部有一个粘性导航栏现在正常工作将在我网站所有 3 个页面顶部附近的随机点取消粘贴并显示“位置:相对”属性。

在使用两个大于和小于 512 像素的 @media(最大宽度/最小宽度)文章向网站添加响应功能后,我注意到了这个错误

在父容器和本机容器中尝试过不同的溢出,但没有成功,只会进一步破坏它。

当前和错误格式的网页在此处在线: http://db814.brighton.domains/ci435/learningJournal.html

这里是相关的 HTML 和 CSS sn-ps,

    <div class="desktop-menu">
        <ul id="page-links">
            <li class="active" ><a href="learningJournal.html">Learning Journal</a></li>
            <li><a href="tutorial.html">Tutorial</a></li>
            <li><a href="contact.html">Contact Me</a></li>
        </ul>

@media (min-width: 512px) {
 .desktop-menu  {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index:1;
 }
 .desktop-menu ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
   background-color: #AEA79F;
   overflow: hidden;
   width: 100%;
   bottom 0;
 }
.desktop-menu li    {
   float: left;
 }
.desktop-menu a {
   display: block;
   color: #fff;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
 }
.desktop-menu a:hover {
   color: #E95420;
 }
.mobile-menu {
    display: none;
}

【问题讨论】:

    标签: html css css-position sticky


    【解决方案1】:

    这个错误只是由给身体的 100% 高度引起的。

    【讨论】:

    • 啊!谢谢你,先生!现在工作正常
    • 不客气。
    猜你喜欢
    • 1970-01-01
    • 2023-04-01
    • 1970-01-01
    • 1970-01-01
    • 2021-01-03
    • 2018-06-10
    • 1970-01-01
    • 1970-01-01
    • 2018-06-05
    相关资源
    最近更新 更多