Question

我正在尝试一个位置固定属性的简单粘性标题。我遇到的问题是，后台css属性不适用于固定div的父元素？我在这做什么错？

这是代码：

HTML：

  <div class="sticky_bg">
    <div class="container">
      <div class="sticky">

         <div class="logo">
              <img src="images/logo.png" alt="logo"/>
         </div>

 <div class="menu">
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">About Us</a></li>
       <li><a href="#">Our Objectives</a></li>
       <li><a href="#">Our Services</a></li>
       <li><a href="#">Contact Us</a></li>
    </ul>
 </div>

</div>

的CSS：

   <style>
   body{min-height:5000px;}
   .container{max-width:1170px;margin:0 auto;}
   header{width:100%;float:left;background:url("images/boat-bg.jpg")no-repeat center;background-size:cover;height:560px;}

 .sticky_bg{width:100%;float:left;background:#000;position:absolute;}
 .sticky {
     background: #444;
     position:fixed;
     width: 1170px;
     height: 80px;
     transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
     z-index:100;
   }

   .default {top: 0;}
   .fixed {top: -80px;}
  .logo{float:left;margin:25px 0 25px 1%;}
  .menu{float:right;margin:25px 1% 25px 0;}
  .menu ul li{list-style:none;float:left;}
  .menu ul li a{color:#fff; font-family: 'OpenSansSemibold';padding:0 15px;border-right:1px solid #fff;}
  .menu ul li:last-child {margin-right:0;}
  .menu ul li:last-child a{border-right:none;}

jQuery的：

  <script src="js/jquery-1.11.3.min.js"></script>
  <script>
    (function($) {

     var ost = 0;

     $(window).scroll(function() {
        var cOst = $(this).scrollTop();

        if(cOst > ost) {
           $('.sticky').addClass('fixed').removeClass('default');
        }
     else {
          $('.sticky').addClass('default').removeClass('fixed');
         }

     ost = cOst;
     });

  })(jQuery);

 </script>

一旦你向上滚动你就可以看到一个粘性功能，但事情只是粘性css正在应用，但我想要＆＃34; stickybg＆＃34;向上滚动时，具有背景属性的元素还应该使用粘性菜单移动？怎么做？

JSFIDDLE

Answer 1

您需要始终修复标题。

# no need to call `r.json` so many times, can simply save it to a variable
json_data = r.json()
for item in json_data["data"]["array"]:
    if item["name"] == "Value1":
        # do something...

https://jsfiddle.net/szvhapa5/1/

背景不适用于位置固定div的父元素

1 个答案: