HTML

Question

我试图制作类似于Linus Tech提示（https://linustechtips.com/main/）的导航栏，用于学校作业。我是在Javascript的真正基本级别，我制作了一个可用的导航栏，但是当我制作它时，它上面没有横幅。现在它上方有一个横幅，当我开始滚动时，我不知道如何让导航栏推到顶部。这是我的HTML：

<div class="navContainer">

    <div class="topBanner">

        <img src="images/topbanner.png" id="topBannerimg"/>

    </div>

    <div id="navbar">

        <button onclick="pinfunc()"><i id="pin" class="fa fa-thumb-tack fa-2x navButton" id="pinbtn" aria-hidden="true"></i></button>

    </div>

</div>

这是我的Javascript：

var pinned = 1;
    console.log(pinned);
function pinfunc() {


    if (pinned == 1) {
        document.getElementById("navbar").style.position= "relative";
        document.getElementById("pin").style.color = "black";
        document.getElementById("pin").style.transform = "rotate(0deg)";
        pinned=0;
    }
    else if (pinned == 0) {
        document.getElementById("navbar").style.position="fixed";
        document.getElementById("pin").style.color = "red";
        document.getElementById("pin").style.transform = "rotate(270deg)";
        pinned=1;
    }
}

这是我的CSS：

body{
    margin: 0 auto;
}

.navContainer{
    width: 100%;
    margin: 0 auto;
}

#topBannerimg{
    width: 100%;
    margin: 0;
    display:block
}

.navButton{
    height: 25px;
    width: 25px;
}

.fa-thumb-tack{
    font-size: 50px;
    color: red;
    transform: rotate(270deg);
}

.container{
    height: 1000px;
    width: 90%;
    margin: 0 auto;
}

#navbar{
    height: 50px;
    width: 100%;
    position: fixed;
    margin: 0 auto;
    background-color: #D35300;
}

#nav{
    background-color: #D35300;
    height: 50px;
}

我只想创建一个LTT论坛的基本版本 - 无需切换按钮淡出或任何东西。这是我的第一篇文章，所以我不能100％确定怎么做。提前谢谢。

Answer 1

如果允许使用外部JS或CSS库，请尝试使用Affix插件进行引导。（链接：http://www.w3schools.com/bootstrap/bootstrap_affix.asp）。它使你想要完成的事情变得简单。

如果您不允许使用任何外部库，我建议您阅读：http://getbootstrap.com/javascript/#affix-examples并尝试自己实施。

祝你好运！

所以我使用了以下HTML，JS和CSS文件：

HTML

<html>
  <head>
    <link rel="stylesheet" href="path/to/font-awesome.css/file" type="text/css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <!-- Custom CSS File Below -->
    <link href="/path/to/custom/css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div class="topBanner">
      <img src="images/topbanner.png" id="topBannerimg"/>
    </div>
    <div id="navbar" data-spy="affix" data-offset-top="100">
      <button onclick="pinfunc()"><i id="pin" class="fa fa-thumb-tack fa-2x navButton" aria-hidden="true"></i></button>
    </div>

    <div id="SpaceFiller"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="path/to/custom/js/file"></script>
  </body>
</html>

从这个HTML中学习的关键是在主体标记的底部加载JS文件，以便首先加载页面，以及加载CSS和JS文件的顺序。 SpacFiller div就是为了启用滚动功能。另外，请注意我删除了导航栏容器，因为它似乎没有必要。

的Javascript

var pinned = true;

function pinfunc() {
   var  $pin = $("#pin");
   var  $navbar = $("#navbar");
   if (pinned) {
      $pin.css({
         'color': 'black',
         'transform': 'rotate(0deg)'
      });
      console.log("not pinned")
      $(window).off('.affix');
      $navbar.removeClass('affix affix-top affix-bottom');
      $navbar.removeData("bs.affix");
      pinned = false;
   } else {
      $pin.css({
         'color': 'red',
         'transform': 'rotate(270deg)'
      });
      $(window).on('.affix');
      $navbar.addClass('affix');
      $navbar.affix({
         offset: 100
      });
      pinned= true;
    }
}

这个JS使用jQuery Selectors（它实际上使用我认为的sizzle.js）来通过他们的ID访问HTML元素。使用返回的jQuery对象，该函数设置适当的CSS，然后使用您可以在此处阅读的函数切换词缀：http://getbootstrap.com/javascript/#affix，https://api.jquery.com/removeclass/，https://api.jquery.com/jQuery.removeData/，http://api.jquery.com/off/。此外，您使用0和1作为pinned值，但最好使用布尔值（true和false），如图所示。

CSS

body{
   margin: 0 auto;
}

.affix {
   top: 0;
   width: 100%;
}

.affix + .container-fluid {
   padding-top: 70px;
}

#topBannerimg{
   width: 100%;
   margin: 0;
   display:block;
   height: 100px;
   top: 0px;
}

.navButton{
   height: 25px;
   width: 25px;
}

.fa-thumb-tack{
   font-size: 50px;
   color: red;
   transform: rotate(270deg);
}

#navbar{
   height: 50px;
   width: 100%;
   margin: 0 auto;
   background-color: #D35300;
}

#SpaceFiller {
  height: 10000px;
  background-color: darkgreen;
}

我认为CSS是不言自明的，但如果不清楚则继续并要求澄清。希望这可以帮助！：d

修改：您还可以将onclick属性放在i标记本身上，如果要删除button包装，请删除它白色按钮背景。

滚动时将导航栏固定到页面顶部

1 个答案:

HTML

的Javascript

CSS