英文:
Foundation Sticky | Element should stick when the top of viewport hits it, not immediately
问题
我不太确定Foundation中的"sticky"如何工作。部分内的元素在视口顶部触及元素时需要保持粘性，而不是立即生效。页面上有多个部分，需要保持粘性的元素可能在页面下方，位于另一个部分之下。在视口顶部触及元素之后，它应该一直保持粘性。
在点击滚动按钮后，元素会立即变为粘性，而不是在视口顶部触及它时。我尝试了许多"data-anchors"并尝试了"data-sticky-containers"，但似乎无法使其工作。也许这更困难，因为需要保持粘性的元素位于一个部分内，而不是它自己的部分。但我无法更改HTML结构。
我创建了一个Codepen来显示和解决这个问题，链接在这里：https://codepen.io/vialito/pen/yLQMQZR
这是HTML，希望有人可以帮助我解决这个问题！
<main>
<div class="nav">
<div class="gridcontainer">
<div class="grid-x">
<div class="content"></div>
</div>
</div>
</div>
<section class="main">
<div class="gridcontainer">
<div class="grid-x">
<div class="one cell small-12 large-8">
<div class="content"></div>
</div>
<div class="two cell small-12 large-4">
<div class="content"></div>
</div>
<div class="three cell small-12" data-sticky-container>
<div class="content sticky" data-sticky data-margin-top="0"></div>
</div>
</div>
</div>
</section>
<section class="random">
<div class="gridcontainer">
<div class="grid-x">
<div class="content"></div>
</div>
</div>
</section>
</main>
英文:
I am not entirely sure how Foundation sticky works. An element within a section needs to be sticky when the top of the viewport hits the element, not immediately. There are multiple sections on the page and the element that needs to be sticky might be further down the page, below another section. After the top of the viewport hits the element, it should be sticky all the way down.
The element becomes sticky immediately after you hit the scroll button, not when the top of the viewport hits it. I tried many data-anchors and played around with data-sticky-containers, but I can't seem to make it work. Maybe it is more difficult because the element that needs to be sticky is inside of a section and it's not a section of its own. But I can't change the HTML structure.
I created a Codepen to display and play with the issue here: https://codepen.io/vialito/pen/yLQMQZR
This is the HTML, I hope someone can help me out!
<main>
<div class="nav">
<div class="gridcontainer">
<div class="grid-x">
<div class="content"></div>
</div>
</div>
</div>
<section class="main">
<div class="gridcontainer">
<div class="grid-x">
<div class="one cell small-12 large-8">
<div class="content"></div>
</div>
<div class="two cell small-12 large-4">
<div class="content"></div>
</div>
<div class="three cell small-12" data-sticky-container>
<div class="content sticky" data-sticky data-margin-top="0"></div>
</div>
</div>
</div>
</section>
<section class="random">
<div class="gridcontainer">
<div class="grid-x">
<div class="content"></div>
</div>
</div>
</section>
</main>
答案1
得分: 0
以下是您提供的内容的翻译：
首先，您需要为您的粘性元素之上的元素定义一个id（例如id="stickyElem"），在您的HTML中，该元素具有class="two cell small-12 large-4"。
然后，在您的粘性元素中，设置以下参数：
<div class="content sticky" data-sticky data-margin-top="0" data-top-anchor="stickyElem:bottom"></div>
下面是具有内联CSS和JavaScript的HTML结构，将其显示在一个index.html文件中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"></script>
<title>Document</title>
<style>
html, body {
height: 100%;
}
.nav {
height: 100px;
background: #cacaca;
}
.main .one {
height: 500px;
background: #1779ba;
}
.main .two {
height: 500px;
background: #0c659d;
}
.main .three {
height: 200px;
}
.main .three .content {
height: 200px;
background: #0b7a00;
}
.random {
height: 2000px;
background: red;
}
</style>
</head>
<body>
<main>
<div class="nav">
<div class="gridcontainer">
<div class="grid-x">
<div class="content"><h1>Header</h1></div>
</div>
</div>
</div>
<section class="main">
<div class="gridcontainer">
<div class="grid-x">
<div class="one cell small-12 large-8">
<div class="content"><h1>Content1</h1></div>
</div>
<div class="two cell small-12 large-4" id="abcd">
<div class="content"><h1>Content2</h1></div>
</div>
<div class="three cell small-12" data-sticky-container>
<div class="content sticky" data-sticky data-margin-top="0" data-top-anchor="abcd:bottom"><h1>Sticky Div</h1></div>
</div>
</div>
</div>
</section>
<section class="random">
<div class="gridcontainer">
<div class="grid-x">
<div class="content">
<h1>Some Text 1</h1><br><br><br>
<h1>Some Text 2</h1><br><br><br>
<h1>Some Text 3</h1><br><br><br>
<h1>Some Text 4</h1><br><br><br>
<h1>Some Text 5</h1><br><br><br>
<h1>Some Text 6</h1><br><br><br>
<h1>Some Text 7</h1><br><br><br>
</div>
</div>
</div>
</section>
</main>
<script> $(document).foundation(); </script>
</body>
</html>
请注意，上述文本包括HTML和CSS代码以及相关的翻译。
英文:
You first need to define an id (like id="stickyElem") for the element above of your sticky element which in your html has class of class="two cell small-12 large-4".
Then in your sticky element, set this parameters:
<div class="content sticky" data-sticky data-margin-top="0" data-top-anchor="stickyElem:bottom"></div>
Below html structure with inline css and javascript will show it in a one index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"></script>
<title>Document</title>
<style>
html, body {
height: 100%;
}
.nav {
height: 100px;
background: #cacaca;
}
.main .one {
height: 500px;
background: #1779ba;
}
.main .two {
height: 500px;
background: #0c659d;
}
.main .three {
height: 200px;
}
.main .three .content {
height: 200px;
background: #0b7a00;
}
.random {
height: 2000px;
background: red;
}
</style>
</head>
<body>
<main>
<div class="nav">
<div class="gridcontainer">
<div class="grid-x">
<div class="content"><h1>Header</h1></div>
</div>
</div>
</div>
<section class="main">
<div class="gridcontainer">
<div class="grid-x">
<div class="one cell small-12 large-8">
<div class="content"><h1>Content1</h1></div>
</div>
<div class="two cell small-12 large-4" id="abcd">
<div class="content"><h1>Content2</h1></div>
</div>
<div class="three cell small-12" data-sticky-container>
<div class="content sticky" data-sticky data-margin-top="0" data-top-anchor="abcd:bottom"><h1>Sticky Div</h1></div>
</div>
</div>
</div>
</section>
<section class="random">
<div class="gridcontainer">
<div class="grid-x">
<div class="content">
<h1>Some Text 1</h1><br><br><br>
<h1>Some Text 2</h1><br><br><br>
<h1>Some Text 3</h1><br><br><br>
<h1>Some Text 4</h1><br><br><br>
<h1>Some Text 5</h1><br><br><br>
<h1>Some Text 6</h1><br><br><br>
<h1>Some Text 7</h1><br><br><br>
</div>
</div>
</div>
</section>
</main>
<script> $(document).foundation(); </script>
</body>
</html>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论