Question

＆＃13;

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-weight: 500;
  font-family: 'Helvetica Neue', sans-serif;
}
main {} .bckgrnd {
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  height: 100%;
  width: 100%;
}
#break {
  clear: both;
}
div {
  width: 100%;
  margin: 0;
  padding: 0 10%;
  max-width: none;
  overflow: hidden;
}
header {
  height: 60vh;
}
#header-slide .bckgrnd {
  background-image: url("../img/headerslide.jpg");
  background-size: cover;
  /*restrains the image to the size of the viewport */
}
#navigation ul {
  padding: 5px 10%;
  opacity: 0.1;
  margin: 0;
  background-color: #ffffff;
  height: 6vh;
  width: 100%;
  !important
}
#navigation li {
  float: left;
  background-color: none;
  list-style: none;
}
#intro-main {
  height: 100vh;
  background-color: #373B44;
}
#mse {
  height: 100vh;
  background-color: #000000;
  background-image: url("../img/mse.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#isg {
  height: 100vh;
  background-color: #cccccc;
  background-image: url("../img/isg.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#about {
  height: 50vh;
  background-color: #A8A8A8;
}
#credits {
  height: 4vh;
  background-color: #101010;
}

＆＃13;

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<!--<![endif]-->

<html class="no-js">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Mse &amp; Isg</title>
  <meta name="description" content="Embroidery Ads Coveralls Signs Graphic Decals">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/normalize.css">
</head>

<body>


  <main>

    <header id="header-slide" class "header">

      <div class="bckgrnd" data-center="background-position: 100% 0px;" data-top-bottom="background-position: 100% -250px;">

      </div>

      <!--navigation-->
      <nav id="navigation">
        <ul>
          <li>Home</li>
          <li>About Us</li>
          <li>Mse</li>
          <li>Isg</li>
          <li>Contact Us</li>
        </ul>
      </nav>

    </header>

    <div id="intro-main">
    </div>

    <div id="mse">
    </div>

    <div id="isg">
    </div>

    <div id="about">
    </div>

    <div id="credits">

    </div>


  </main>

  <script src="js/jquery.js"></script>
  <script src="js/skrollr.js"></script>
  <script src="js/stickUp.min.js"></script>

  <script type="text/javascript">
    <!--skrollr initialize-->
    var s = skrollr.init({
      forceHeight: false
    });

     //initiating jQuery
    jQuery(function($) {
      $(document).ready(function()



        //enabling stickUp on the navbar
        $('#navigation').stickUp();
      });
    });
  </script>

</body>

</html>

＆＃13;

我对编码有点新意，虽然我在大学时就读过计算机科学，但直到现在我才能使用它。

问题在于：我正在为一家公司建立一个网站，我几乎完成了布局。

它只是粘性导航栏，表现得很奇怪，当向下滚动时它会向右移动（在向下滚动并保持100％宽度后我应该坚持）。

我正在使用一个名为stickUp.js的免费jquery插件，我不确定它是否与skrollr的兼容性问题。这是我正在使用的插件以及我希望导航栏的操作方式，除了保持整页的宽度100％。 http://lirancohen.github.io/stickUp/

以下是问题的看法：
http://adventcomp.com/beta/index.html

图像文件很大，我没有计划使用它们。他们现在只是占位符，因为我将在这个网站上使用skrollr所以不要担心。

TIA

Answer 1

当粘贴变得粘滞时，您需要将导航栏的宽度设置为100％。这应该可以解决问题。

Answer 2

通常，当你制作一个粘性标题时，你必须添加一个位置：固定它。

我会用：

.nav {
    position: fixed;
    width: 100%;
}

这是CodePen中的一个示例。

http://codepen.io/brycesnyder/pen/dPbxqE

Answer 3

我使用以下内容将元素粘贴到顶部并跨越视口的宽度。

position: fixed;
top: 0;
left: 0;
right: 0;

Answer 4

通过使用以下css，它将解决您的问题，

.navbar-fixed-top, .navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
}

此外，您可以使用bootstrap插件为您的网站提供良好的布局。这是bootstrap的链接， Bootstrap plugin with example

粘性导航 - 使用stickUp.js插件

4 个答案: