sticky 相关问题

在网页中，粘性元素是页面的一个元素，它保持在屏幕上的固定位置，使其始终可见。

Adding CSS class using offsetHeight (Javascript) causes elements to flicker

我重新创建了一个我的问题的简化版本：一个瘦横幅（当用户向下滚动时隐藏），主导航（当用户向下滚动时应该坚持到页面顶部）和一些......

javascript html css sticky

回答 6 投票 0

有人可以帮我用粘性桌子接普通桌子吗？

我有一个顶部有粘性标签的页面，效果很好。（它留在原处）。这个粘性表后面是另一个表，第二个表的内容滚动到第一个...

scroll header sticky

回答 0 投票 0

使锚导航与多个粘性部分一起工作

我想制作一个单页网站，向下滚动时粘性部分会相互覆盖。那部分有效。我无法使用锚点进行点导航，因为所有部分都在每个

javascript html scroll anchor sticky

回答 0 投票 0

粘性菜单的平滑 CSS 动画

嗨，我有一个标题菜单，只要用户开始向下滚动并且徽标从屏幕上移开，它就会粘在顶部。菜单上的标识也变小了。这是我的 CSS 代码： // 嗨，我有一个标题菜单，一旦用户开始向下滚动并且徽标从屏幕上移开，它就会粘在顶部。菜单上的标识也变小了。这是我的 CSS 代码： //<![CDATA[ $(function(){ // Check the initial Poistion of the Sticky Header var stickyHeaderTop = $('#logo').offset().top + 160; $(window).scroll(function(){ if( $(window).scrollTop() > stickyHeaderTop ) { $('#logo').addClass('fixed'); } else { $('#logo').removeClass('fixed'); } }); });//]]> #logo img { height: 145px; margin: 10px 0 0; transition: height 1s ease 0s; } .fixed img { height: 55px !important; position: fixed; top: 0; z-index: 3; } main {height:1000px;} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="logo"> <img alt="" src="https://www.gravatar.com/avatar/ca71f423aadaa366bd910dfcb1a25d0b?s=48&d=identicon&r=PG"> </div> <main> some content </main> 我有一个额外的 jquery 脚本，负责将“固定”类添加到 DIV。我的问题是，虽然徽标 img 的大小变化是平滑的，但定位不是这样，因为徽标应该平滑地下降，而不是它只是出现在适当的位置。我在这里错过了什么？谢谢。你有两个问题： 1）您只对高度进行了动画处理。要为更多属性设置动画，只需在逗号后添加它们。 .selector { transition: height 250ms ease-in-out, top 250ms ease-in-out; } 2）您正在尝试为 position: static; to position: fixed; top: 0; 中的元素设置动画，但这不起作用，它需要始终保持静态（并以负边距工作）或始终保持绝对（但您将拥有即使标题不固定，也可以设置“最高”值。我会这样做： #logo img { height: 145px; margin: 10px 0 0; transition: height 1s ease 0s, margin 1s ease 0s; } .fixed img { height: 55px !important; z-index: 3; margin: -155px 0 0; } 这是因为您使用的是 id 而不是 class。所以基本上即使 css 属性发生变化，如果有冲突， id 选择器下的属性将被优先考虑。因为好吧，id 优先于课堂。另一个重要原因是因为您正在转换height，而不是位置。你想让它滑下来（如果我理解正确的话）。不会成长吧？检查这个codepen。如果我正确理解您的要求，这应该可以帮助您理解问题。 //<![CDATA[ $(function() { // Check the initial Poistion of the Sticky Header var stickyHeaderTop = $('#logo').offset().top + 160; $(window).scroll(function() { if ($(window).scrollTop() > stickyHeaderTop) { $('#logo').addClass('fixed'); } else { $('#logo').removeClass('fixed'); } }); }); //]]> .logo img{ top:-200px; height: 145px; margin: 10px 0 0; transition: top .3s; } .fixed img { height: 55px !important; position: fixed; top: 0; z-index: 3; transition: top .3s; } main { height: 1000px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="logo" class="logo"> <img alt="" src="https://www.gravatar.com/avatar/ca71f423aadaa366bd910dfcb1a25d0b?s=48&d=identicon&r=PG"> </div> <main> some content </main>

css sticky

回答 2 投票 0

如何避免车头下的身体流动

我做了以下网站练习： http://frontendpractice.oddsolutionslab.com/ 我对标题和主要内容 div 有疑问。标头具有粘性，并且...

html css header sticky document-body

回答 0 投票 0

如何创建一个带有自动点击按钮且不透明度平滑变化的垂直滑块？

我遇到了一个网站（https://get.mem.ai/），它在滚动、粘性内容和 300vh 滚动劫持方法上使用事件监听器。我正在尝试复制

css scroll transform sticky

回答 0 投票 0

粘性按钮也显示在桌面屏幕上

我为小屏幕制作了粘性按钮，它在小屏幕上工作正常但我面临的问题是粘性按钮也显示在桌面屏幕上，我尝试了一切但仍然无法工作...

javascript html button desktop sticky

回答 0 投票 0

用CSS为Element-UI组件设置Sticky Table Header。

在我的代码中，我使用了元素-ui表（https:/element.eleme.io#en-UScomponenttable）组件。它的工作原理很好，但是我想把表头自定义为sticky。它提供了最大高度...

css html-table css-position sticky element-ui

回答 1 投票 1

如何在有背景色的情况下，将一个个的标题粘住？

我的页面上有一个章节标题，我必须设置每个章节标题在我的手机上触碰顶部时的粘性。我试过下面的代码，但是没有用。这个$("...... "有一些问题。

javascript html jquery css sticky

回答 2 投票 0

如何在有背景色的情况下，将一个个的标题粘住？

我的页面上有一个章节标题，我必须设置每个章节标题在手机上触及顶部时都是粘性的，并且还要为其应用一个背景颜色。我尝试了下面的代码，但它不 ...

javascript html jquery css sticky

回答 2 投票 2

如何在 react native 中实现 Twitter 的 Profile 屏幕的用户体验，可折叠的头部（Sticky TabBar）和可滚动的标签？

我试过react-navigation-collapsible，但由于react-native#21801类似问题基于多个ScrollView(s)的单个View动画化 React native animation scrollview ...。

react-native sticky

回答 1 投票 0

CSS背景色不粘

我想让一个从页面中间开始的导航条在滚动时能贴在屏幕的顶部。我已经成功地使用了导航条的项目，但导航条的背景（灰色），在滚动...

html css flexbox sticky

回答 1 投票 0

Stickem元素从容器中脱离出来

我使用的是jquery stickem库，我从来没有遇到过问题。我已经把stickem-container放在了div的包装器上，并把stickem类放到了我想做粘性的元素上。我看了...

jquery sticky

回答 1 投票 0

嘿，我需要修正sticky一个div，只在桌面版。不在手机版。所以，请建议我如何粘住一个div [关闭] 。

在这里输入图片描述我需要修复sticky一个div，只在桌面版。不在移动版。基本上，我有一个电子商务网站的单品页面，我想修复添加到购物车的部分......

html jquery css media sticky

回答 1 投票 -1

标题不粘在屏幕顶部

我正在这个移动网站上：hannelorefischer.com，我尝试将标头的一部分保留在顶部：

javascript html css sticky

回答 1 投票 0

标题不粘在屏幕顶部

我正在此网站上移动：hannelorefischer.com。但是，页眉未粘贴在屏幕顶部。这是我的代码： ] >>] 使用position: fixed;代替position: sticky; 将这些属性添加到标题ID 标题 { position: sticky; top: 10; text-align: center; font: Italic 18px/29px 'pensumpro-book'; letter-spacing: 0px; color: #000000; opacity: 1; }

javascript html css sticky

回答 2 投票 0

嵌套的弹性框和位置：顶部和底部是否粘滞？

我正在尝试获取一列flexbox，以将其部分标题粘贴到顶部和底部，到目前为止，我只能使顶部的标题适当地粘贴。我读了一堆...

css flexbox sticky

回答 1 投票 -1

Bootstrap粘性顶部导航栏在我使用平滑滚动时是重叠的内容

我已尝试修复此错误几天，并且似乎没有谷歌搜索或旧答案可以解决此问题。我添加了一个位于我体内的顶部导航栏（在巨型英雄图像下方，...

html css nav sticky smooth-scrolling

回答 1 投票 1

React sticky Navbar

我正在尝试使我的导航导航栏变粘，同时，到达每个部分时，导航栏中的徽标和项目应更改颜色。我使用的是不应该是的透明导航栏。