2016-11-21 11 views
0

ページをスクロールしながらヘッダーが透明にならないようにするのに苦労しています。 I(私はテンプレートを使用)、それを引き起こしているかわからないんだけど、あなたはここにコードを表示することができますヘッダーは上部に透明です

https://github.com/IF-Apps/IF-Charts

<!doctype html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9" lang=""> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]--> 
<head> 
    <meta charset="utf-8"> 
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">--> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <title>IF-Charts - Charts and Plates for Flight Simulation</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="apple-touch-icon" href="apple-touch-icon.png"> 
    <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" /> 
    <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" /> 
    <link rel="stylesheet" href="css/normalize.min.css"> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/jquery.fancybox.css"> 
    <link rel="stylesheet" href="css/flexslider.css"> 
    <link rel="stylesheet" href="css/styles.css"> 
    <link rel="stylesheet" href="css/queries.css"> 
    <link rel="stylesheet" href="css/etline-font.css"> 
    <link rel="stylesheet" href="bower_components/animate.css/animate.min.css"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
    <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script> 
    <div id="fb-root"></div> 
    <script>(function(d, s, id) { 
     var js, fjs = d.getElementsByTagName(s)[0]; 
     if (d.getElementById(id)) return; 
     js = d.createElement(s); js.id = id; 
     js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8"; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk'));</script> 
</head> 
<body id="top"> 
    <!--[if lt IE 8]> 
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
    <![endif]--> 
    <section class="hero"> 
     <section class="navigation"> 
      <header> 
       <div class="header-content"> 

        <div class="header-nav"> 
         <nav> 
          <ul class="primary-nav"> 
          <li><a href="index.html">Home</a></li> 
           <li><a href="ifcharts.html">IF-Charts</a></li> 
           <li><a href="learnmore.html">Learn More</a></li> 
           <li><a href="contact.html">Contact</a></li> 
          </ul> 
         </nav> 
        </div> 
        <div class="navicon"> 
         <a class="nav-toggle" href="#"><span></span></a> 
        </div> 
       </div> 
      </header> 
     </section> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-10 col-md-offset-1"> 
        <div class="hero-content text-center"> 
         <h1>IF-Charts</h1> 
         <p class="intro">Plan your flight with plates.</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 
      <section class="features section-padding" id="features"> 
     <div class="container"> 
      <div class="row"> 
        <div class="feature-list"> 
         <h3>Plan your flight</h3> 
         <p>Select the airport you would like charts for. Want to learn how to use charts? Check out the <a href="tutorial.html">tutorial</a>. PLEASE NOTE THAT THESE CHARTS ARE NOT FOR OPERATIONAL USE!</p> 
         <br> 
         <div class="fb-like" data-href="https://www.facebook.com/IF-Charts-1233474450057832/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div> <br> <br> 
         <br> 

    <div align="center"> 
     <h2>Please choose:</h2> 
     <br /> 

      <span> 

      <a href="charts_depart.html"><img src="img/takeoff-the-plane.png" alt="Departures" style="width:80px;height:80px;border:0;"></a> 

      <a href="charts_arrive.html"><img src="img/plane-landing.png" alt="Arrivals" style="width:80px;height:80px;border:0;"></a> 

      </span> 
     <p>View all charts <a href="ifcharts-old.html">here</a>. 
    </div> 
      </section> 
    <footer> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-7"> 
        <div class="footer-links"> 
         <a href="https://github.com/GiacomoLaw/IF-Charts/blob/master/LICENSE">Licence</a> | <p><p>By Giacomo Lawrance.</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </footer> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script> 
    <script src="bower_components/retina.js/dist/retina.js"></script> 
    <script src="js/jquery.fancybox.pack.js"></script> 
    <script src="js/vendor/bootstrap.min.js"></script> 
    <script src="js/scripts.js"></script> 
    <script src="js/jquery.flexslider-min.js"></script> 
    <script src="bower_components/classie/classie.js"></script> 
    <script src="bower_components/jquery-waypoints/lib/jquery.waypoints.min.js"></script> 
    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> 
    <script> 
    (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= 
    function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; 
    e=o.createElement(i);r=o.getElementsByTagName(i)[0]; 
    e.src='//www.google-analytics.com/analytics.js'; 
    r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); 
    ga('create','UA-XXXXX-X','auto');ga('send','pageview'); 
    </script> 
</body> 
</html> 

を、私はそれがCSSに関係していると思うが、私はないです確かに。

問題は、上部にメニュー項目が表示されない場合です。ヘッダーを黒くしたいだけです。あなたは、ナビゲーションに背景色を追加する必要が

https://if-charts.000webhostapp.com/

+1

ここにコードを表示する必要があります...関連コード – DaniP

答えて

1

scripts.jsファイルには、スクロール時にいくつかの項目を追加または削除する機能があります。

/***************** Header BG Scroll ******************/ 

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

      if (scroll >= 20) { 
       $('section.navigation').addClass('fixed'); 
       $('header').css({ 
        "border-bottom": "none", 
        "padding": "35px 0" 
       }); 
       $('header .member-actions').css({ 
        "top": "26px", 
       }); 
       $('header .navicon').css({ 
        "top": "34px", 
       }); 
      } else { 
       $('section.navigation').removeClass('fixed'); 
       $('header').css({ 
        "border-bottom": "solid 1px rgba(255, 255, 255, 0.2)", 
        "padding": "50px 0" 
       }); 
       $('header .member-actions').css({ 
        "top": "41px", 
       }); 
       $('header .navicon').css({ 
        "top": "48px", 
       }); 
      } 
     }); 
    }); 

完全にこの機能を削除してください。

変更

<section class="navigation"> 

<section class="navigation fixed"> 

するには、CSSファイル内の次のクラスに追加するだけでなく、他のプロパティを使用したい場合。

header { 
    border-bottom: none; 
    padding: 35px 0; 
} 

header .member-actions { 
    top: 26px; 
} 

header .navicon { 
    top: 34px; 
} 
+0

大変ありがとうございます! –

0

:あなたはここでの問題を見ることができます。

.navigation { 
    background: #232731; 
} 
関連する問題