文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >网站导航栏

问网站导航栏
EN

Code Review用户
提问于 2021-03-31 13:29:33
回答 1查看 85关注 0票数 1

我刚刚开始学习用html、css和JavaScript编写网站代码。为了得到一点好处，我正在尝试建立一个完整的网页。

到目前为止，我只做过肚脐。我从一个基本的引导5导航栏开始，并对它进行了修改，使它看起来和我想要的行为。我花了三天时间，但现在看起来很好。

或者至少在外面是这样的。然而，我无法摆脱这样一种感觉，即用更少的代码就可以轻松地完成这一任务。

有人能指出一些例子，说明我在这方面可能做得太过迂回，以及我可以做得更好的地方吗？

我已将代码粘贴到CodePen中：

https://codepen.io/AlexanderSplat/pen/ZELLEeB

代码语言：javascript
运行
复制
$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  var width = $(window).width();
  if (scroll >= 50 && width <= 1000) {
    document.querySelector(".navbar").style.paddingTop = "0";
    document.querySelector(".navbar").style.paddingBottom = "0";
    document.querySelector(".navbar-brand").style.fontSize = "28px";
    document.querySelector(".navbar-brand").style.paddingTop = "0.4%";
    document.querySelector(".navbar-brand").style.paddingBottom = "0.3%";
    document.querySelector(".navbar-brand").style.height = "40px";
    document.querySelector(".navbar-brand").style.lineHeight = "40px";
    document.querySelector("#navhome").style.paddingTop = "15px";
    document.querySelector("#navabout").style.paddingTop = "15px";
    document.querySelector("#navport").style.paddingTop = "15px";
    document.querySelector("#navteam").style.paddingTop = "15px";
    document.querySelector("#navcont").style.paddingTop = "15px";
    document.querySelector("#navhome").style.paddingBottom = "14px";
    document.querySelector("#navabout").style.paddingBottom = "14px";
    document.querySelector("#navport").style.paddingBottom = "14px";
    document.querySelector("#navteam").style.paddingBottom = "14px";
    document.querySelector("#navcont").style.paddingBottom = "14px";
  } else if (scroll >= 50 && width >= 1001) {
    document.querySelector(".navbar").style.paddingTop = "0";
    document.querySelector(".navbar").style.paddingBottom = "0";
    document.querySelector(".navbar-brand").style.fontSize = "28px";
    document.querySelector(".navbar-brand").style.paddingTop = "0.4%";
    document.querySelector(".navbar-brand").style.paddingBottom = "0.3%";
    document.querySelector(".navbar-brand").style.height = 'initial';
    document.querySelector(".navbar-brand").style.lineHeight = 'initial';
    document.querySelector("#navhome").style.paddingTop = "15px";
    document.querySelector("#navabout").style.paddingTop = "15px";
    document.querySelector("#navport").style.paddingTop = "15px";
    document.querySelector("#navteam").style.paddingTop = "15px";
    document.querySelector("#navcont").style.paddingTop = "15px";
    document.querySelector("#navhome").style.paddingBottom = "14px";
    document.querySelector("#navabout").style.paddingBottom = "14px";
    document.querySelector("#navport").style.paddingBottom = "14px";
    document.querySelector("#navteam").style.paddingBottom = "14px";
    document.querySelector("#navcont").style.paddingBottom = "14px";
  } else {
    document.querySelector(".navbar").style.paddingTop = "8px";
    document.querySelector(".navbar-brand").style.fontSize = "40px";
    document.querySelector(".navbar-brand").style.paddingTop = "0.6%";
    document.querySelector(".navbar-brand").style.paddingBottom = "0.6%";
    document.querySelector(".navbar-brand").style.height = 'initial';
    document.querySelector(".navbar-brand").style.lineHeight = 'initial';
    document.querySelector("#navhome").style.paddingTop = "28px";
    document.querySelector("#navabout").style.paddingTop = "28px";
    document.querySelector("#navport").style.paddingTop = "28px";
    document.querySelector("#navteam").style.paddingTop = "28px";
    document.querySelector("#navcont").style.paddingTop = "28px";
    document.querySelector("#navhome").style.paddingBottom = "28px";
    document.querySelector("#navabout").style.paddingBottom = "28px";
    document.querySelector("#navport").style.paddingBottom = "28px";
    document.querySelector("#navteam").style.paddingBottom = "28px";
    document.querySelector("#navcont").style.paddingBottom = "28px";
  }
});
代码语言：javascript
运行
复制
body {
  height: 200vh;
}

@media (min-width: 1001px) {
  .navbar-brand {
    color: white;
    font-family: 'Julius Sans One';
    font-style: normal;
    font-weight: 400;
    font-size: 40px;
    padding-left: 67px;
    margin-left: 1.9%;
    transition: 0.4s;
  }
  .navbar {
    background-color: #105565;
    position: fixed;
    width: 100%;
    transition: 0.4s;
  }
}

@media (max-width: 1000px) {
  .navbar-brand {
    color: white;
    font-family: 'Julius Sans One';
    font-style: normal;
    font-weight: 400;
    font-size: 40px;
    height: 52px;
    line-height: 52px;
    padding-top: 0;
    padding-bottom: 0;
    margin-left: 2.5%;
    transition: 0.4s;
  }
  .navbar {
    background-color: #105565;
    position: fixed;
    width: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
    transition: 0.4s;
  }
  .fas {
    color: rgba(255, 255, 255, 1.00);
  }
}

.navbar-nav {
  margin-right: 4.4%;
}

.nav-item {
  font-family: 'roboto';
  font-size: 14px;
  font-weight: 300;
}

#navhome {
  color: white;
  background: #105565;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 12px;
  padding-right: 12px;
}

#navabout {
  color: white;
  background: #105565;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 12px;
  padding-right: 12px;
}

#navport {
  color: white;
  background: #105565;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 12px;
  padding-right: 12px;
}

#navteam {
  color: white;
  background: #105565;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 12px;
  padding-right: 12px;
}

#navcont {
  color: white;
  background: #105565;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 12px;
  padding-right: 12px;
}

#navhome:hover {
  color: #105565 !important;
  background: white;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 12px;
  padding-right: 12px;
}

#navabout:hover {
  color: #105565 !important;
  background: white;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 12px;
  padding-right: 12px;
}

#navport:hover {
  color: #105565 !important;
  background: white;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 12px;
  padding-right: 12px;
}

#navteam:hover {
  color: #105565 !important;
  background: white;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 12px;
  padding-right: 12px;
}

#navcont:hover {
  color: #105565 !important;
  background: white;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 12px;
  padding-right: 12px;
}
代码语言：javascript
运行
复制
   Navbar Inc.   
    
      
         HOME 
         ABOUT 
         PORTFOLIO 
         TEAM 
         CONTACT

我最麻烦的是让白色的选择框(当你悬停在每个导航链接上)覆盖肚脐的整个高度和导航项目的整个宽度在每一个响应大小，以及文本在每一个大小的位置。(基本上有四种大小状态:在窄(<1000 in )或宽窗口中向上或向下滚动。)

通过在错误的部分张贴这个问题 (我是新来的)，我已经得到了一些很棒的建议，但是更多的改进代码的技巧是非常受欢迎的。

的确，如果没有!important，我无法找到解决填充冲突的方法，所以如果有人能为我指明正确的方向，我将非常感激。

javascript
jquery
html
css
EN

回答 1

Code Review用户

回答已采纳

发布于 2021-04-01 06:33:57

首先，恭喜让你的肚脐工作和坚持这几天！

有很多东西可以改进，但乍一看，最突出的问题是您的样式遍布HTML、CSS和JS文件。这使我们很难对它们进行推理。下面是如何简化情况，并使其更容易使用。

  1. 从HTML和JS中删除所有style属性赋值--将这些样式说明放入您的CSS类中。
  2. 将JS代码中的样式属性赋值替换为类赋值，以简化事情并减少(昂贵的！)每当用户滚动时，DOM都会查询您正在运行的内容。
  3. 使用媒体查询处理所有依赖于视图端口的水平大小的样式。您已经在您的CSS (例如@media (max-width: 1000px))中这样做了，但是在JS代码中也是这样做的，这会使事情变得混乱。只要用CSS就行了。
  4. (可选)不要使用jQuery。本地的web能够完成您在这里使用jQuery实现的任务，您可以通过删除它来简化很多事情。

通过上面描述的更改，以下是您的JS的样子：

代码语言：javascript
运行
复制
// Query just once, and reuse the reference.
var navbar = document.querySelector(".navbar");
var isScrolledDownClass = "is-scrolled-down";
var scrollDownClassThreshold = 50;

window.addEventListener("scroll", function() {
  if (!navbar) return; // or treat the failure to query the navbar as an error
  if (window.scrollY >= scrollDownClassThreshold) {
    navbar.classList.add(isScrolledDownClass);
  } else {
    navbar.classList.remove(isScrolledDownClass);
  }
});

在CSS中，您可以使用后代组合子根据他们祖先的状态向他们应用样式。这将帮助您仅当navbar元素具有is-scrolled-down类时应用某些样式：

代码语言：javascript
运行
复制
#navabout {
  color: white;
  background: #105565;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 12px;
  padding-right: 12px;
}

.navbar.is-scrolled-down #navabout {
  padding-bottom: 14px;
  padding-top: 15px;
}
票数 3
EN
页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://codereview.stackexchange.com/questions/258921

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档