jquery - OnScroll Down 标题高度得到但不是在滚动顶部时
问题描述
当我尝试向下滚动时，标题大小会减小，但是当向上滚动时，标题将变为实际大小，当向下滚动和标题大小减小时，内容部分会减小margin-top，但问题是当我向上滚动并且.maindiv 没有得到标题大小而不是减小margin. 谢谢。
$('.main').css('margin-top', ($('.header-outer').height())+'px');
$(window).on("scroll", function() {
const scrollTop = $(document).scrollTop();
if (scrollTop > 1) {
const mainHeight = $(".header-outer").height();
$('.main').css('margin-top', mainHeight);
$('.header-outer').addClass('show');
} else {
$('.header-outer').removeClass('show');
const mainHeight = $(".header-outer").height();
$('.main').css('margin-top', mainHeight);
//console.log(mainHeight);
}
});@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");
*,
*:after,
*:before {
box-sizing: border-box;
}
body,html{
margin:0;
padding:0;
}
body {
font-family: "DM Sans", sans-serif;
background-color: #f2f5f7;
line-height: 1.5;
min-height: 300vh;
position: relative;
}
.responsive-wrapper {
width: 90%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
/* Sticky header */
.header-outer {
transition: all .4s ease;
display: flex;
align-items: center;
background-color: #fff;
box-shadow: 0 2px 10px 0 rgba(0,0,0, 0.1);
position: fixed;
width:100%;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 100px;
padding-bottom: 100px;
transition: all .4s ease;
}
.header-outer.show .header-inner{
padding-top: 30px;
padding-bottom: 30px;
}
/* Styling of other elements */
.header-logo {
height: 43px;
}
.header-logo img {
display: block;
}
.header-navigation {
display: flex;
flex-wrap: wrap;
}
.header-navigation a {
font-size: 1.125rem;
color: inherit;
margin-left: 1.75rem;
position: relative;
font-weight: 500;
}
.header-navigation a {
display: inline-block;
font-size: 1.125rem;
color: inherit;
text-decoration: none;
}
.header-navigation a:hover:after {
transform: scalex(1);
}
.header-navigation a:after {
transition: 0.25s ease;
content: "";
display: block;
width: 100%;
height: 2px;
background-color: currentcolor;
transform: scalex(0);
position: absolute;
bottom: -2px;
left: 0;
}
.main {
position:absolute;
inset: 0;
transition: all .4s ease;
padding-top:30px;
}
.widget {
width: 100%;
max-width: 600px;
border-radius: 8px;
box-shadow: 0 15px 30px 0 rgba(0,0,0, 0.1);
background-color: #fff;
padding: 2.5rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 2rem;
font-size: 1.125rem;
}
.widget > * + * {
margin-top: 1.25em;
}
.widget h2 {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.25;
}
.widget code {
display: inline-block;
padding: 0.125em 0.25em;
border-radius: 2px;
background-color: #bee5d3;
}
.widget strong {
font-weight: 700;
}
.footer{
height: 200px;
background:#000;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Sticky header -->
<header class="header-outer">
<div class="header-inner responsive-wrapper">
<div class="header-logo">
<img src="https://assets.codepen.io/285131/acme-2.svg">
</div>
<nav class="header-navigation">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Blog</a>
<a href="#">Contact Us</a>
</nav>
</div>
</header>
<!-- Content -->
<main class="main">
<div class="main-content responsive-wrapper">
<article class="widget">
<h2>How does it work without JS? </h2>
<p>This sticky header consists of two elements: an <strong>outer</strong> and an <strong>inner</strong> container. The outer container is taller than the inner — and the inner is centered vertically.
</p><p>By utilizing the <code>position: sticky</code> property <strong>twice</strong>, both on the header's <strong>outer container</strong> and <strong>inner container</strong> the outer container will stick to the <code>body</code>, while the inner container will stick to the outer container.</p>
<p>Note that the outer container has a negative <code>top</code> value equal to the height difference between the two containers. This causes the outer container to stick <strong>above</strong> the <code>body</code>, making the inner container stick to the "ceiling" on scroll.
</p><p></p>
<p>This sticky header consists of two elements: an <strong>outer</strong> and an <strong>inner</strong> container. The outer container is taller than the inner — and the inner is centered vertically.
</p><p>By utilizing the <code>position: sticky</code> property <strong>twice</strong>, both on the header's <strong>outer container</strong> and <strong>inner container</strong> the outer container will stick to the <code>body</code>, while the inner container will stick to the outer container.</p>
<p>Note that the outer container has a negative <code>top</code> value equal to the height difference between the two containers. This causes the outer container to stick <strong>above</strong> the <code>body</code>, making the inner container stick to the "ceiling" on scroll.
</p><p></p>
<p>This sticky header consists of two elements: an <strong>outer</strong> and an <strong>inner</strong> container. The outer container is taller than the inner — and the inner is centered vertically.
</p><p>By utilizing the <code>position: sticky</code> property <strong>twice</strong>, both on the header's <strong>outer container</strong> and <strong>inner container</strong> the outer container will stick to the <code>body</code>, while the inner container will stick to the outer container.</p>
<p>Note that the outer container has a negative <code>top</code> value equal to the height difference between the two containers. This causes the outer container to stick <strong>above</strong> the <code>body</code>, making the inner container stick to the "ceiling" on scroll.
</p><p></p>
<p>This sticky header consists of two elements: an <strong>outer</strong> and an <strong>inner</strong> container. The outer container is taller than the inner — and the inner is centered vertically.
</p><p>By utilizing the <code>position: sticky</code> property <strong>twice</strong>, both on the header's <strong>outer container</strong> and <strong>inner container</strong> the outer container will stick to the <code>body</code>, while the inner container will stick to the outer container.</p>
<p>Note that the outer container has a negative <code>top</code> value equal to the height difference between the two containers. This causes the outer container to stick <strong>above</strong> the <code>body</code>, making the inner container stick to the "ceiling" on scroll.
</p><p></p>
<p>This sticky header consists of two elements: an <strong>outer</strong> and an <strong>inner</strong> container. The outer container is taller than the inner — and the inner is centered vertically.
</p><p>By utilizing the <code>position: sticky</code> property <strong>twice</strong>, both on the header's <strong>outer container</strong> and <strong>inner container</strong> the outer container will stick to the <code>body</code>, while the inner container will stick to the outer container.</p>
<p>Note that the outer container has a negative <code>top</code> value equal to the height difference between the two containers. This causes the outer container to stick <strong>above</strong> the <code>body</code>, making the inner container stick to the "ceiling" on scroll.
</p><p></p>
</article>
</div>
<div class="footer"></div>
</main>解决方案
我只更改了 jQuery 代码和bodyCSS min-height: 100vh，现在它可以工作了。
const main = $('.main');
const header_outer = $('.header-outer');
const initial_height = header_outer.height() + 'px';
main.css('top', initial_height);
$(window).on("scroll", function() {
const scrollTop = $(document).scrollTop();
if (scrollTop > 1) {
header_outer.addClass('show');
main.css('top', header_outer.height() + "px");
} else {
header_outer.removeClass('show');
main.css('top', initial_height);
}
});@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");
*,
*:after,
*:before {
box-sizing: border-box;
}
body,html{
margin:0;
padding:0;
}
body {
font-family: "DM Sans", sans-serif;
background-color: #f2f5f7;
line-height: 1.5;
min-height: 100vh;
position: relative;
}
.responsive-wrapper {
width: 90%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
/* Sticky header */
.header-outer {
transition: all .4s ease;
display: flex;
align-items: center;
background-color: #fff;
box-shadow: 0 2px 10px 0 rgba(0,0,0, 0.1);
position: fixed;
width:100%;
z-index: 1;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 100px;
padding-bottom: 100px;
transition: all .4s ease;
}
.header-outer.show .header-inner{
padding-top: 30px;
padding-bottom: 30px;
}
/* Styling of other elements */
.header-logo {
height: 43px;
}
.header-logo img {
display: block;
}
.header-navigation {
display: flex;
flex-wrap: wrap;
}
.header-navigation a {
font-size: 1.125rem;
color: inherit;
margin-left: 1.75rem;
position: relative;
font-weight: 500;
}
.header-navigation a {
display: inline-block;
font-size: 1.125rem;
color: inherit;
text-decoration: none;
}
.header-navigation a:hover:after {
transform: scalex(1);
}
.header-navigation a:after {
transition: 0.25s ease;
content: "";
display: block;
width: 100%;
height: 2px;
background-color: currentcolor;
transform: scalex(0);
position: absolute;
bottom: -2px;
left: 0;
}
.main {
position:relative;
inset: 0;
transition: all .4s ease;
padding-top:30px;
}
.widget {
width: 100%;
max-width: 600px;
border-radius: 8px;
box-shadow: 0 15px 30px 0 rgba(0,0,0, 0.1);
background-color: #fff;
padding: 2.5rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 2rem;
font-size: 1.125rem;
}
.widget > * + * {
margin-top: 1.25em;
}
.widget h2 {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.25;
}
.widget code {
display: inline-block;
padding: 0.125em 0.25em;
border-radius: 2px;
background-color: #bee5d3;
}
.widget strong {
font-weight: 700;
}
.footer{
height: 200px;
background:#000;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Sticky header -->
<header class="header-outer">
<div class="header-inner responsive-wrapper">
<div class="header-logo">
<img src="https://assets.codepen.io/285131/acme-2.svg">
</div>
<nav class="header-navigation">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Blog</a>
<a href="#">Contact Us</a>
</nav>
</div>
</header>
<!-- Content -->
<main class="main">
<div class="main-content responsive-wrapper">
<article class="widget">
<h2>How does it work without JS? </h2>
<p>This sticky header consists of two elements: an <strong>outer</strong> and an <strong>inner</strong> container. The outer container is taller than the inner — and the inner is centered vertically.
</p><p>By utilizing the <code>position: sticky</code> property <strong>twice</strong>, both on the header's <strong>outer container</strong> and <strong>inner container</strong> the outer container will stick to the <code>body</code>, while the inner container will stick to the outer container.</p>
<p>Note that the outer container has a negative <code>top</code> value equal to the height difference between the two containers. This causes the outer container to stick <strong>above</strong> the <code>body</code>, making the inner container stick to the "ceiling" on scroll.
</p><p></p>
<p>This sticky header consists of two elements: an <strong>outer</strong> and an <strong>inner</strong> container. The outer container is taller than the inner — and the inner is centered vertically.
</p><p>By utilizing the <code>position: sticky</code> property <strong>twice</strong>, both on the header's <strong>outer container</strong> and <strong>inner container</strong> the outer container will stick to the <code>body</code>, while the inner container will stick to the outer container.</p>
<p>Note that the outer container has a negative <code>top</code> value equal to the height difference between the two containers. This causes the outer container to stick <strong>above</strong> the <code>body</code>, making the inner container stick to the "ceiling" on scroll.
</p><p></p>
<p>This sticky header consists of two elements: an <strong>outer</strong> and an <strong>inner</strong> container. The outer container is taller than the inner — and the inner is centered vertically.
</p><p>By utilizing the <code>position: sticky</code> property <strong>twice</strong>, both on the header's <strong>outer container</strong> and <strong>inner container</strong> the outer container will stick to the <code>body</code>, while the inner container will stick to the outer container.</p>
<p>Note that the outer container has a negative <code>top</code> value equal to the height difference between the two containers. This causes the outer container to stick <strong>above</strong> the <code>body</code>, making the inner container stick to the "ceiling" on scroll.
</p><p></p>
<p>This sticky header consists of two elements: an <strong>outer</strong> and an <strong>inner</strong> container. The outer container is taller than the inner — and the inner is centered vertically.
</p><p>By utilizing the <code>position: sticky</code> property <strong>twice</strong>, both on the header's <strong>outer container</strong> and <strong>inner container</strong> the outer container will stick to the <code>body</code>, while the inner container will stick to the outer container.</p>
<p>Note that the outer container has a negative <code>top</code> value equal to the height difference between the two containers. This causes the outer container to stick <strong>above</strong> the <code>body</code>, making the inner container stick to the "ceiling" on scroll.
</p><p></p>
<p>This sticky header consists of two elements: an <strong>outer</strong> and an <strong>inner</strong> container. The outer container is taller than the inner — and the inner is centered vertically.
</p><p>By utilizing the <code>position: sticky</code> property <strong>twice</strong>, both on the header's <strong>outer container</strong> and <strong>inner container</strong> the outer container will stick to the <code>body</code>, while the inner container will stick to the outer container.</p>
<p>Note that the outer container has a negative <code>top</code> value equal to the height difference between the two containers. This causes the outer container to stick <strong>above</strong> the <code>body</code>, making the inner container stick to the "ceiling" on scroll.
</p><p></p>
</article>
</div>
<div class="footer"></div>
</main>推荐阅读
- modelica - Modelica 中的解码器有什么问题？
- jquery - 当分辨率低于一定数量的像素时更改分割顺序
- javascript - 接收来自多个帐户的消息
- .net - 如何在 c# 中的 Registry.CurrentUser.OpenSubKey 中设置以管理员身份运行？
- php - PHP-Ajax：带有下拉菜单的实时搜索并在点击时赋值
- twig - 有条件地渲染带有回退的 twig 变量
- python - 为什么 Python 在从 Pandas 系列中提取时似乎忽略了通配符？
- python - 优化 pandas 数据帧适用于解码 CAN 帧 - 遍历行
- r - 为什么在 R 中使用 pagedown 制作的 html cv 的 Google chrome 打印会在页面中留下空白？
- r - 使用闪亮的输入、文本和希腊字母向 ggplot 添加标题