Question

编写脚本以检查我的标签是否在顶部。如果top只是通过更新/添加类粘贴来修复它。

代码：

// This is my javaScript Code ....
// which will check whether my tab is on the top or not... if top just fixed
// it by updating/ adding the class sticky.
    window.onscroll = function() {cFunction()};

    var header = document.getElementById("myHeader");
    var sticky = header.offsetTop;

        function cFunction() {
      if (window.pageYOffset >= sticky) {
        header.classList.add("sticky");
      }     else {
        header.classList.remove("sticky");
      }
      }

.btn-primary
        {
        font-size:12px;
        }
      .btn-group-justified {
           width:100%;
          }
      .sticky {
      position: fixed;
      top: 0;
      width: 100%;
    }

    .sticky + .content {
      padding-top: 102px;
    }

    .section{
    width:100%;
    }

      }
    }</script>

    </body>
    </html>

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Page 1</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
        </ul>
      </div>
    </nav>
<!-- MY Tab Code below the NAV Section 

This is My tab bar consisting of bootstrap button group. -->

    <section>
    <div class="container" id="myHeader">
      <div id="no" class="btn-group btn-group-justified">
        <a href="#" class="btn btn-primary">Rates</a>
        <a href="#" class="btn btn-primary">What to Expect</a>
        <a href="#" class="btn btn-primary">Our Professionals</a>
        </div>
    
        <div id="yes" class="btn-group btn-group-justified">
        <a href="#" class="btn btn-primary">Reviews</a>
        <a href="#" class="btn btn-primary">Recent Bookings</a>
        <a href="#" class="btn btn-primary">FAQs</a>
        <a href="#" class="btn btn-primary">Related Blogs</a>
	
      </div>
    </div>
    </section>

如何修复导航栏和标签？实际上，我想修改我的导航栏下面的标签栏。
我只是试图将顶部从0更改为某些+ ve值，但没有任何改变。也使用位置：固定。

Answer 1

嗯，首先，我检查了你的CSS并没有找到任何与课程相关的内容＆＃34; nav＆＃34;，＆＃34; navbar-nav＆＃34;或类似的东西。你完成了导航栏的样式吗？我没有在任何地方看到CSS。

.btn-primary
    {
    font-size:12px;
    }
  .btn-group-justified {
       width:100%;
      }
  .sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 102px;
}

.section{
width:100%;
}

  }
}</script>

</body>
</html>

另外，我知道这并没有回答你的问题，但是你的JavaScript给了我一个＆＃34;意外的输入错误结束＆＃34;因为很明显当我把它放在控制台中时，在 if ... else 代码块的末尾有一些括号丢失。你可能想确保你没有忘记最后两个结束括号，如果它工作正常那么它一定是我......

如何修复导航和选项卡两者

1 个答案: