在图像之后如何让导航栏粘到页面顶部？

时间：2016-11-24 08:17:14

标签： javascript jquery html css

我试图在滚动标题后让导航栏粘到页面顶部。

所以它会与此类似codepen.io，但带有图片。因此，对于图片，它将被拉伸到大部分屏幕，但它也会根据窗口的大小进行调整。因此我不能在200px之后说出导航条，因为图像的大小会有所不同。如果可能的话，有没有办法制作一个Javascript函数，注册一次到达任何元素的底部，导航栏会坚持？

HTML：

    <header>
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Mount_Shuksan,_Picture_Lake_(2362739742).jpg" alt="">
  </header>

  <nav id = "nav_bar">
      <ul class = "navbar-list">
          <li>
              <a href="">link1</a>
          </li>
          <li class="dropdown">
              <a href="#" class="dropbtn">link2</a>
                  <div class="dropdown-content">
                      <a href="#">link 1</a>
                      <a href="#">link 2</a>
                      <a href="#">link 3</a>
                      <a href="">link 4</a>
                  </div>
          </li>
          <li>
              <a href="">link 3</a>
          </li>
          <li>
              <a href="">link4</a>
          </li>
      </ul>
  </nav>

<body>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

  

CSS：

body{
margin:0px;
}

header{
margin: 0 auto;
/*position: fixed;*/
top: 0;
}


img{
max-width: 100%;
text-align: center;
top: 0;
display: block;
}

.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}


ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
} 

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
 }

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: green;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

codepen.io - 包含示例图片

4 个答案:

答案 0 :(得分：1)

像这样的东西

＆＃13;
＆＃13; 
var nav_bar_top_offset = $('#nav_bar').offset().top;

$(window).scroll(function() {
  if ($(this).scrollTop() > nav_bar_top_offset) {
      $('#nav_bar').addClass('fixed');
  } else {
    $('#nav_bar').removeClass('fixed');
  }
});
＆＃13; 
body {
  margin: 0px;
}
header {
  margin: 0 auto;
  /*position: fixed;*/
  top: 0;
}
section{background:#fff}
img {
  max-width: 100%;
  text-align: center;
  top: 0;
  display: block;
}
.navbar-fixed {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: green;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
  display: block;
}
.fixed{
  position:fixed;
  top:0;
  width:100%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Mount_Shuksan,_Picture_Lake_(2362739742).jpg" alt="">
  </header>

<nav id="nav_bar">
  <ul class="navbar-list">
    <li>
      <a href="">link1</a>
    </li>
    <li class="dropdown">
      <a href="#" class="dropbtn">link2</a>
      <div class="dropdown-content">
        <a href="#">link 1</a>
        <a href="#">link 2</a>
        <a href="#">link 3</a>
        <a href="">link 4</a>
      </div>
    </li>
    <li>
      <a href="">link 3</a>
    </li>
    <li>
      <a href="">link4</a>
    </li>
  </ul>
</nav>

 <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</section>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

就像您使用Tutorial Codepen一样，只需将示例的选择器更改为选择器。

试试这个：

"use strict";
(function(){
  let mdlTfFix = () => {
    return {
      restrict: "C",
      require: "ngModel",
      link: ($scope, $element, $attrs, ngModelCtrl) => {
        $scope.$watch(() => {
          return ngModelCtrl.$modelValue;
        }, (newVal, oldVal) =>{

          if(typeof newVal !== "undefined" && newVal !== "" && newVal !== oldVal){
            $element.parent().addClass("is-dirty");
          }
          else{
            $element.parent().removeClass("is-dirty");
          }
        });
      }
    };
  };

  mdlTfFix.$inject = [];
  app.directive("mdlTextfieldInput", mdlTfFix);

})();

这里是codepen

请记住：如果您将导航栏设置为粘性，则会删除导航栏所在的空间。因此，您的导航栏可能会超出您的第一行文本。只需在标题中添加导航栏高度的填充。这也可以在你的js中完成。

您可以使用此填充添加类，也可以手动添加它。以下是示例：

var  mn = $("#nav_bar");
    mns = "navbar-fixed";
    hdr = $('header').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > hdr ) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});

或

$('header').addClass("extraPadding"); // extraPadding is the class that you have to create

答案 2 :(得分：0)

我认为你想要实现的是这个。希望能帮到你。点击Run code snippet即可看到它的实际效果。

首先，在滚动时检查何时到达要保持固定的元素并添加fixed类，然后如果向后滚动则将其删除。

＆＃13;
＆＃13; 
var navBarOffset = $('#nav_bar').offset().top;

$(window).scroll(function() {
  var navBar= $('#nav_bar');
  var scroll = $(window).scrollTop();

  if (scroll >= navBarOffset ) {
    navBar.addClass('fixed');
  } else {
    navBar.removeClass('fixed');
  }
});
＆＃13; 
body {
  margin: 0px;
}
header {
  margin: 0 auto;
  /*position: fixed;*/
  top: 0;
}
.fixed {
  position: fixed;
  top:0; 
  left:0;
  width: 100%; 
}
img {
  max-width: 100%;
  text-align: center;
  top: 0;
  display: block;
}
.navbar-fixed {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: green;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
  display: block;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Mount_Shuksan,_Picture_Lake_(2362739742).jpg" alt="">
</header>

<nav id="nav_bar">
  <ul class="navbar-list">
    <li>
      <a href="">link1</a>
    </li>
    <li class="dropdown">
      <a href="#" class="dropbtn">link2</a>
      <div class="dropdown-content">
        <a href="#">link 1</a>
        <a href="#">link 2</a>
        <a href="#">link 3</a>
        <a href="">link 4</a>
      </div>
    </li>
    <li>
      <a href="">link 3</a>
    </li>
    <li>
      <a href="">link4</a>
    </li>
  </ul>
</nav>

<body>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>


</body>
<footer>

</footer>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

# Add copy permission to the image's snapshot
# Find the snapshot of the specific AMI
image_object = EC2conn.get_image(AMI_id)

# Grab the block device mapping dynamically
ami_devices = []
for key in image_object.block_device_mapping.iterkeys():
    # print key #debug
    ami_devices.append(key)
# print ami_devices #debug

for ami_device in ami_devices:
    snap_id = image_object.block_device_mapping[ami_device].snapshot_id

    # Add permission
    EC2conn.modify_snapshot_attribute(snap_id, attribute='createVolumePermission', operation='add', user_ids=second_aws_account_id)
    print "{0} [{1}] Permission added to snapshot".format(AMI_name,snap_id)

希望这个帮助你fiddle

相关问题
最新问题