个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我正在为我即将举行的婚礼建立一个网站，我想要一个粘性标题，但出于某种原因，当你在页面上向下移动到一定位置后，它会“消失”。我的测试网址是:https://betterradiotech.com .这是导航标记:
<!-- Start Nav -->
<header>
<nav>
<ul class="nav-list">
<li><a href="/" title="Home">Home</a></li>
<li><a href="/music/" title="Music">Music</a></li>
<li><a href="/gallery/" title="Gallery">Gallery</a></li>
<li><a href="/feed/" title="Feed">Feed</a></li>
</ul>
</nav>
</header> <!--/ End Nav -->
这是导航 SCSS:
header {
padding: 1em;
position: sticky;
top: 0;
z-index: 100;
width: 100%;
background-color: $burgandy;
}
.nav-list {
display: flex;
flex-flow: row nowrap;
li {
list-style-type: none;
margin-left: 10px;
}
a {
color: $pink;
font-weight: 600;
}
}
.active-nav {color: $navy !important;}
制作导航时没有 JavaScript，除了使事件导航正常工作...为了完整起见，我也将包括在内:
switch(location.pathname) {
case "/":
document.querySelector("a[title*='Home']").classList.add("active-nav");
break;
case "/admin/":
document.querySelector("a[title*='Admin']").classList.add("active-nav");
break;
case "/feed/":
document.querySelector("a[title*='Feed']").classList.add("active-nav");
break;
case "/gallery/":
document.querySelector("a[title*='Gallery']").classList.add("active-nav");
break;
case "/music/":
document.querySelector("a[title*='Music']").classList.add("active-nav");
break;
}
为什么我的导航栏在页面下方一定距离后消失了？它似乎发生在第一节的完整背景图片结束之前。
最佳答案
这可能是因为你的包含元素没有你想象的那么高，你可能必须显式地将该元素的height设置为fit-content，因为粘性元素不能离开他们的父级!
在大多数情况下，最简单的解决方案是将此规则添加到您的 CSS:
body {
height: fit-content;
}
但通常，您需要哪种解决方案以及必须将其应用到哪个元素取决于您的文档结构。假设它看起来像这样:
<body>
<header>
<nav>
<!-- Your navigation -->
</nav>
</header>
<main>
<!-- The main content of the site -->
</main>
</body>
您可能使用了一些包含如下规则的 CSS 重置:
html, body {
height: 100%;
}
这允许在你的页面上使用百分比高度，但它会在没有额外工作的情况下打破粘性标题。
当您使用开发工具查看主体尺寸时，一切看起来都不错:
但是一旦向下滚动，就会发现一个问题:
body 与您的视口(viewport)一样高。您看到的所有其他内容都从中溢出。但是粘性 header 无法做到这一点，它会留在 body 中并随之消失。我们现在有三种可能的解决方案:
如果您的页面不需要基于百分比的高度，您可以使用此 CSS 规则:
body {
height: fit-content;
}
如果有一些基于百分比的高度，请尝试将它们替换为 vh，看看是否适合您。然后您可以应用上面的修复程序。
如果您确实需要基于百分比的高度，那么您可能希望让主体保持原位但滚动溢出的内容:
html {
overflow: hidden;
}
body {
overflow: scroll;
}
关于html - 在页面向下移动一定方向后粘性标题消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49324760/
25
4
0
我正在使用 MapBox 绘制兴趣点，这些兴趣点是通过基于 Rails 构建的用户生成表单提交的。当前，用户输入一个地址，然后该地址通过 gem(地理编码器)计算出 Lat 和 Lng。从那里我通过
我正在纵向平板电脑上开发应用程序。 但是，当平板电脑转到横向模式时，应用程序也会转动，并且所有对齐方式都将被取消。那么有什么方法可以将我的 WPF 应用程序锁定到一个方向？ 谢谢! 最佳答案 我必须同
我在我的应用程序中的 mkmapview 上显示了两点之间的路线，但我想显示这两点的方向。点的纬度和经度存储在 NSArray 中。 最佳答案 这可能为时已晚，您可能已经解决了它，但这是我已经测试过并
我正在处理一个小型 Unity3D 项目，我需要从另一个工具导入一些数据。该工具通过两个向量为我提供了对象方向，我需要将其移植到 Unity。 例如，我有这两个向量； x = Vector( 0.70
有没有办法以编程方式设置 UIActionSheet 的方向？我的 iPhone 方向是纵向，但 UIActionSheet 需要是横向。这可以吗？ 编辑: 所以我的问题是我不想将 rootviewc
如何在 Python 中根据 2 个 GPS 坐标计算速度、距离和方向(度)？每个点都有纬度、经度和时间。 我在这篇文章中找到了半正矢距离计算: Calculate distance between
需要一个代码来更改 div 的属性，具体取决于 iPhone 设备的位置。在这段代码工作之前现在停止这样做了吗？ @media all and (orientation:portrait) { .
在“View Did Load”中，我试图确定 View 的大小，以便我可以适本地调整 subview 的大小。我希望它始终围绕屏幕的长度和宽度拉伸(stretch)，而不管方向如何。 quest *
如何根据对象的方向移动对象？我的意思是，我有一个处于某个位置的立方体，我想绕 Y 轴旋转并根据它们的方向移动。然后再次移动和旋转以改变方向。像这样的事情: 最佳答案 在 JS 中你可以尝试这样的事情:
我目前有一个处于横向模式的 SurfaceView。 目前我正在尝试使用添加操作栏/菜单栏 /*Action Bar */ //this.setRequestedOrientation(Activit
我正在使用 cocos2d，我想播放电影。为此，我创建了 MPMoviePlayerViewController 并将其作为 [[CCDirector sharedDirector] openGLVi
我在 cocos2d 中创建了一个游戏，因为我想使用我找到的一些 UIKit 元素 kobold2d。 我移植了游戏，但问题是我的 iPhone 刺激器旋转了， 但不是显示的节点。 必须使用: bac
我可以在 iOS 中的 UITabBarController 中更改方向吗？我有这样的东西: UITableViewController-> Team Tab -> UINavigationContr
我有 UINavigationController 和几个 View Controller 。这是他们的名单:主->相册->图片 现在，在第一个和第二个(主要和专辑)中，我希望 UINavigatio
人们普遍认为，在过去几年中，标准显示器的最佳网站宽度已从 800 像素增加到 1024+ 像素(网站通常为 960 像素宽)，但随着移动设备的兴起，哪些分辨率被认为是“关键”迎合？ 例如，this
我正在做一个 GTK+ 项目，我需要一个像这样的垂直 GtkLevelBar: 但我不知道如何从默认的水平 GtkLevelBar 翻转它: 这是我的 GtkLevelBar 代码。 GtkWidge
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我的 collectionView 以横向模式显示 20 个项目。在纵向模式下，我只想展示 8 个可重复使用的项目。我怎样才能做到这一点？ collectionView 何时在数据源上调用 colle
可以在 list 文件中设置 Activity 的方向。 但是否也可以通过代码来实现？如果是，怎么办？ 谢谢! 最佳答案 setRequestedOrientation(ActivityInfo.SC
我希望在纬度、经度和用户当前位置之间集成方向。我希望通过点击按钮将用户定向到已安装的 Google map /其他应用程序并显示方向。 我搜索了 SO 和谷歌，但找不到好的来源，因此我发布了这个问题。
我是一名优秀的程序员,十分优秀！