navbar - 滚动页面时进行水平滚动
问题描述
我有网站上所有部分的导航栏。当它是移动视图时,此导航栏是带有滚动条的一行。
当我将页面向下滚动到该部分时,我想滚动此导航栏自动。
我可以在不使用滑块的情况下实现这一目标吗?
.wrapper {
width: 360px;
height: 720px;
border: 1px solid #000;
}
ul {
list-style-type: none;
padding: 10px 0;
margin: 10px 0;
display: flex;
background: #ccc;
}
li {
margin: 0 8px;
}
<div class="wrapper">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
解决方案
html, body {
margin: 0px;
padding: 0px;
}
header {
width: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.7);
}
nav {
max-width: 700px;
margin: 0 auto;
padding: 4px;
}
nav a {
color: white;
padding: 2px;
}
.content-container {
max-width: 700px;
margin: 0 auto;
}
.section-content {
padding: 10px 0px;
}
.flex-container {
display: flex;
justify-content: space-around;
}
.flex-column {
width: 150px;
height: 150px;
background-color: yellow;
margin: 2.5px;
display: inline-block;
}
<header>
<nav>
<a href="#first">Section1</a>
<a href="#second">Section 2</a>
<a href="#third">Section 3</a>
<a href="#fourth">Section 4</a>
</nav>
</header>
<div class="content-container">
<div class="section-content" id="first">
<h3>Section 1</h3>
<div class="flex-container">
<p class="flex-column">Hello world!</p>
<p class="flex-column">Hello world!</p>
<p class="flex-column">Hello world!</p>
<p class="flex-column">Hello world!</p>
</div>
</div>
<div class="section-content" id="second">
<h3>Section 2</h3>
<div class="flex-container">
<p class="flex-column">Hello world!</p>
<p class="flex-column">Hello world!</p>
<p class="flex-column">Hello world!</p>
<p class="flex-column">Hello world!</p>
</div>
<p>Item of div section 2.</p>
</div>
<div class="section-content" id="third">
<h3>Section 3</h3>
<p>Item of div section 3.</p>
</div>
<div class="section-content" id="fourth">
<h3>Section 4</h3>
<p>Item of div section 4.</p>
</div>
</div>
<script type = "text/javascript">
$(document).ready(function(){
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top
}, 1000, 'swing');
});
});
</script>
推荐阅读
- python-3.x - python 垃圾收集器不会删除 tf.keras 模型
- php - 如何在 laravel 的表中创建关系?
- php - 将相同商品添加到购物车时如何在会话中更新产品数量?
- python - 使用 python flask_mail msg.body="" 通过电子邮件发送多个 html 表单字段的数据
- caching - Gitlab CI 在每个作业使用后再次保存缓存
- reactjs - Botframework Create Directline 从服务器获取令牌
- reactjs - 基本待办事项项目中的“DELETE_TODO”
- excel - 检查小时列是否存在所有时间
- spring-boot - WebLogic Server 中未启动 Spring Web MVC
- angularjs - 无法使用 handlererror 重定向