javascript - 粘性导航栏 - 仅在移动设备上显示

Question

我只想让按钮在移动设备上具有粘性——演示中的类似内容 link

您必须将浏览器调整为移动尺寸才能看到它。基本上这是预期的方式 -在着陆页上，您可以看到按钮位于横幅下方，向下滚动时它会粘在顶部: stickynav

我想在移动设备上设置此粘性，但现在在桌面设备上设置。您能否建议是否有任何影响或如何仅在移动设备上实现按钮粘性？

桌面版本对按钮的放置方式有什么影响吗？

Answer 1

假设你有一个按钮

<button class="for-mobile"></button

你需要先隐藏这个按钮

.for-mobile {display:none;}

并在调整屏幕大小时显示

@media only screen and (max-width: 1020px)
.for-mobile {
    display: block !important;
}

更改最大宽度以在应用此样式时进行调整