问题：

响应导航栏一旦打开就会阻止主体内容

严天逸

2023-03-14

在尝试创建解决方案之前，请确保在chrome浏览器上启用了响应工具栏。我正在尝试先为手机做响应性设计，然后为桌面做响应性设计。但我有一个问题，我打开汉堡包菜单，导航栏会阻止我的内容。我试图通过做position:relative来解决这个问题；但是我想修正导航栏，这样当我滚动时它就在上面了。此外，当我点击汉堡菜单，而我滚动它只是回到顶部。请帮帮我

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]

toggleButton.addEventListener('click', () => {
    navbarLinks.classList.toggle('active')
})

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100&family=Oswald&display=swap');
@import url("style.css");
*{
    box-sizing: border-box;
}
body{
    padding-top: 65px;
    margin: 0px;
    background-image: url(images/banner.jpg);
}
/* toggle button desiging */
.toggle-button{
    position: absolute;
    top: .75rem;
    right: 1rem;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 30px;
    height: 21px;
}
.toggle-button .bar{
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
}
/* brand title decoration*/
.brand-title{
    font-size: 32px;
    margin: .5rem;
}
.brand-title a{
    margin-left: 5px;
    font-family: "Jetbrains Mono", sans-serif;
    font-size: 28px;
}
/* navbar decoration */
.navbar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: black;
    color: white;
    position: fixed;
    top: 0;
    flex-direction: column;
    align-items: flex-start;
}
.navbar-links{
    width: 100%;
    display: none;
}
.navbar-links ul{
    margin: 0;
    padding: 0;
    display: flex;
    font-family: "Jetbrains Mono", sans-serif;
    flex-direction: column;
    width: 100%;
}
.navbar-links li{
    list-style: none;
}
.navbar-links li a{
    text-decoration: none;
    color: white;
    padding: 1rem;
    display: block;
    transition: .4s ease;
    font-size: 15px;
    text-align: center;
}
.navbar-links li a:hover{
    color: crimson;
}
.navbar-links.active{
    display: flex;
    position: relative;
}
.navbar-links ul.active{
    color: black;
}

/* landing page */

.introduction{
    padding: 0px;
    margin: 32px 32px;
    display: block;
    color: white;
}
.introduction .first-text{
    margin: 0px;
    font-family: "Jetbrains Mono", sans-serif;
    font-weight: 100;
    font-size: 6vh;
}
.first-text a{
    font-weight: bold;
}
.introduction .second-text{
    margin-top: 16px;
    margin-bottom: 16px;
    font-family: "Jetbrains Mono", sans-serif;
    font-weight: 600;
    font-size: 4vh;
    color:rgba(255, 255, 255, 0.800);
}
.introduction .third-text{
    margin: 0;
    font-family: "Jetbrains Mono", sans-serif;
    font-weight: 600;
    font-size: 3vh;
    color:rgba(255, 255, 255, 0.800);
}
.btn-hire-me{
    background-color: rgba(0, 255, 255, 0.800);
    padding: 1rem;
    border: 1px solid black;
    margin-top: 32px;
    border-radius: 8px;
    box-shadow: rgba(255, 255, 255, 0.431) 0 2px 4px;
    font-family: "Jetbrains Mono", sans-serif;
    width: 150px;
    height: 75px;
}
.btn-hire-me img{
    position: relative;
    right: 6px;
    height: 16px;
    width: 16px;
}
.btn-hire-me a{
    font-weight: bold;
    font-size: 22px;
}

.btn-hire-me:hover{
    background: crimson;
    color: white;
}
/* my image */
.my-image img{
    display: block;
    margin: auto;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 3px solid crimson;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
    <script src="https://use.fontawesome.com/72f2c1bea1.js"></script>
    <title>Talha Bin Hasan ||</title>
</head>

<body>
    <header>
        <nav class="navbar" id="nav">
            <div class="brand-title"><i class="fa fas fa-code"></i><a>Talha Bin Hasan</a></div>
            <a href="#" class="toggle-button">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </a>
            <div class="navbar-links">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </nav>
    </header>
    <section>
        <div class="introduction">
            <h1 class="first-text">Hello I am <a>Talha Bin Hasan</a></h1>
            <h3 class="second-text">Front End Web Developer</h3>
            <h3 class="third-text">Highly experienced in designing and developing responsive website.</h3>
            <button type="button" class="btn-hire-me"><img src="images/hire-icon.png" alt=""><a>Hire me</a></button>
        </div>
        <div class="my-image">
            <img src="images/myphoto.jpg" alt="Talha Bin Hasan's photo">
        </div>
    </section>
    
</body>

</html>

共有1个答案

杜河

2023-03-14

当你点击菜单时，它会跳到顶部，因为你的菜单是一个元素。只需将其更改为div：

<div class="toggle-button">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
</div>

为了使菜单打开时内容可见，可以在第一节中添加边距。您可以添加对页面滚动距离的检查，以防止在向下滚动时打开菜单时添加和删除页边距。换衣服。收件人：

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
const firstSection = document.querySelector("section:first-of-type")

toggleButton.addEventListener('click', () => {
    navbarLinks.classList.toggle('active')
    firstSection.classList.toggle('marginTop');
})

window.addEventListener('scroll', function(){ 

    if(window.scrollY > 100){
        firstSection.classList.add("scrolled");
    }
    else {
        firstSection.classList.remove("scrolled");
    }

});

在你的. css中（过渡使其更加平滑）：

section:first-of-type {
    transition-duration: 1s;    
}

section.marginTop:not(.scrolled) {
    margin-top: 200px;
}

类似资料：

顶部导航栏阻止页面的顶部内容

问题内容：我有这个Twitter Bootstrap代码但是，当我查看页面的开头时，导航栏阻止了页面顶部附近的某些内容。关于如何使它在查看页面顶部时将其其余内容压低的想法，以便使内容不会被导航栏阻止？问题答案：添加到您的CSS：从Bootstrap文档：除非您在正文顶部添加填充，否则固定的导航栏将覆盖您的其他内容。
响应式引导导航栏中的中心内容

问题内容：我无法将内容集中在引导导航栏中。我正在使用引导程序3。我已经阅读了许多文章，但是所使用的CSS或方法不适用于我的代码！我真的很沮丧，所以这就像我的最后选择。任何帮助，将不胜感激！问题答案：我认为这就是您想要的。您需要从内部导航中删除，以使其居中并使其成为嵌入式块。编辑：如果只希望在不折叠导航时发生此效果，请将其围绕在适当的媒体查询中。
UIKit 3中的响应导航栏？

我已经将我的网站迁移到UIKit3而不是Bootstrap4。但我已经在导航栏上呆了一段时间了。现在，我的导航栏是在Bootstrap 4中构建的，如下所示： https://jsfiddle.net/eztwL9p7/1/ 所以这只是一个普通的导航栏，但是当页面足够小的时候，会出现一个切换按钮，项目变成一个下拉列表。我一直试图将此迁移到UIKit，但我在他们的模板中看不到任何选项。如果我理解正确
顶部导航栏阻挡页面顶部内容

我有这个推特引导代码但是当我查看页面的开头时，导航栏会阻塞页面顶部附近的一些内容。有没有办法让它在查看页面顶部时将其余内容向下推，这样内容就不会被导航栏阻挡？
响应式WordPress导航栏-附加CSS

嗨，我坚持在Wordpress中定制这个额外的CSS。我使用了一个名为Poza Child的主题，它的最大宽度（100%）如下图所示。我想制作一个反应灵敏的导航栏，让它充满屏幕。正如你在这里看到的，有一个缺口（黑色和灰色）。我想制作一个响应迅速的导航栏（全黑），就像下面的一样。然而，由于使用的主题，我必须添加额外的CSS，使其全宽和响应任何屏幕大小。这是我的WordPress附加CSS的代码片
Bootstrap实现响应式导航栏效果

本文向大家介绍Bootstrap实现响应式导航栏效果，包括了Bootstrap实现响应式导航栏效果的使用技巧和注意事项，需要的朋友参考一下为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮。第一个

响应导航栏一旦打开就会阻止主体内容

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档