1. 首頁
  2. 問答
  3. 如何讓滾動間諜工作？

如何讓滾動間諜工作？

2017-05-25 100 views
0

我無法讓我的滾動間諜工作，我已經嘗試了一切，我做錯了什麼？我看過無數的例子，我似乎擁有一切正確。這裏是整個文件，我認爲可能有一些衝突的CSS？如何讓滾動間諜工作？

<DOCTYPE html> 
    <html lang="en"> 

    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>TCS Event Rentals</title> 
    <!-- Latest compiled and minified CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <style> 
     body { 
     position: relative; 

     } 

     .jumbotron img { 
     width: 100%; 
     height: auto; 

     } 

     .jumbotron { 
     margin-top: 85px; 
     padding-top: 20px; 
     height: 550px; 
     background-image: 
url(https://thumb1.shutterstock.com/display_pic_with_logo/1447/98829743/stock-photo-wedding-tent-set-up-for-an-outdoor-wedding-or-other-event-chairs-set-up-for-an-outdoor-ceremony-98829743.jpg); 
     background-size: 100% 100%; 
     } 

     .jumbotron h2 { 
     color: white; 
     margin-top: 100px; 
     } 

     .navbar-fixed-top { 
     min-height: 125px; 
     } 

     .navbar-header { 
     height: 125px; 
     } 

     a.navbar-brand { 
     height: 125px; 
     } 

     a.navbar-brand > img { 
     margin-top: -13px; 
     } 

     ul.nav { 
     margin-top: 60px; 
     } 

     @media (max-width: 767px) { 
     .navbar-nav > li > a { 
     line-height: 20px; 
     padding-top: 10px; 
     padding-bottom: 10px; 
     } 

     div#bs-example-navbar-collapse-1 { 
     margin-top: 10px; 
     } 

     .navbar-toggle { 
     margin-top: 30px; 
     } 

     ul.nav { 
     margin-top: 10px; 
     } 


    </style> 



</head> 

<body data-spy="scroll" data-target="#my-navbar"> 

    <!-- Navbar --> 
    <nav class="navbar navbar-default navbar-fixed-top" id="my-navbar"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 

       <a class="navbar-brand" href="#"><img src="img/logo.jpg"></a> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 

      <!-- <a href="#contact" class="btn btn-primary navbar-btn navbar-right">Contact Us</a> --> 
       <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#aboutus">About Us</a></li> 
       <li><a href="#eventrental">Event Rental Products</a></li> 
       <li><a href="#eventserved">Events Served</a></li> 
       <li><a href="#gallery">Gallery</a></li> 
       <li><a href="#contact">Contact</a></li> 
       </ul> 
      </div><!-- /.navbar-collapse --> 
     </div><!-- /.container-fluid --> 
    </nav><!-- End Navbar --> 

    <!-- Jumbotron --> 

    <div class="Jumbotron"> 
     <div class="container text-center"> 
      <!--<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQNHBdJdFb6Chukad-YBtL4RXRY0uyR_TI5-hvVYuIHZjQwZB-j" class="img-responsive" alt="Responsive image"> --> 

      <h2>Serving the Special Events Industry</h2> 

      <div class="btn-group"> 
      <a href="#gallery" class="btn btn-lg btn-primary">View Our Gallery</a> 
      </div> 

     </div><!-- End Container --> 
    </div><!-- End Jumbotron --> 

    <div class="container"> 
     <section> 
      <div class="page-header" id="aboutus"> 
       <h2>About Us<small> Check out the feedback</small></h2> 
      </div> 

      <div class="row"> 
       <div class="col-lg-4"> 
        <blockquote> 
         <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
         tempor incididunt ut labore et dolore magna aliqua.</p> 
         <footer>John Doe</footer> 
        </blockquote> 
       </div> 

      <div class="col-lg-4"> 
        <blockquote> 
         <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
         tempor incididunt ut labore et dolore magna aliqua.</p> 
         <footer>John Doe</footer> 
        </blockquote> 
       </div> 

      <div class="col-lg-4"> 
        <blockquote> 
         <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
         tempor incididunt ut labore et dolore magna aliqua.</p> 
         <footer>John Doe</footer> 
        </blockquote> 
       </div> 
      </div><!--End Row --> 
     </section> 
    </div> <!-- End Container --> 

    <!--call to action --> 
    <section> 
     <div class="well"> 
      <div class="container text-center"> 
       <h3>Contact Us to plan your next event</h3> 
       <p>Enter your name and email</p> 

       <form action="" class="form-inline"> 
        <div class="form-group"> 
         <label form="subscription">Contact Us</label> 
         <input type="text" class="form-control" id="subscription" placeholder="Your name"> 
        </div> 
        <div class="form-group"> 
         <label form="email">Email Address</label> 
         <input type="text" class="form-control" id="email" placeholder="Enter your Email"> 
        </div> 
        <button type="submit" class="btn btn-primary">Contact Us</button> 
        <hr> 
       </form> 
      </div><!--end container --> 
     </div><!-- end well --> 
    </section><!-- end Call to action --> 


    <!-- Gallery --> 
    <div class="container"> 
     <section> 
      <div class="page-header" id="gallery"> 
       <h2>Gallery<small> Check out our Gallery</small></h2> 
      </div> 

      <div class="carousel slide" id="screenshot-carousel" data-ride="carousel"> 
       <ol class="carousel-indicators"> 
        <li data-target="#screenshot-carousel" data-slide-to="0" class="active"></li> 
        <li data-target="#screenshot-carousel" data-slide-to="1"></li> 
        <li data-target="#screenshot-carousel" data-slide-to="2"></li> 
        <li data-target="#screenshot-carousel" data-slide-to="3"></li> 
       </ol> 
       <div class="carousel-inner"> 
        <div class="item active"> 
         <img src="https://partytimerental.com/wp-content/uploads/2013/12/100-x-380-Century-Tent-Denver-View-3.x30701.jpg" alt="text of image"> 
        </div> 
        <div class="item"> 
         <img src="https://partytimerental.com/wp-content/uploads/2013/12/100-Wide-Century-Tent-Rocky-Mountains-CO-View-5.x30701.jpg" alt="text of image"> 
        </div> 
        <div class="item"> 
         <img src="https://partytimerental.com/wp-content/uploads/2013/12/100-x-380-Century-Tent-Denver-View-3.x30701.jpg" alt="text of image"> 
        </div> 
        <div class="item"> 
         <img src="https://partytimerental.com/wp-content/uploads/2013/12/100-x-380-Century-Tent-Denver-View-3.x30701.jpg" alt="text of image"> 
        </div> 

       </div><!-- End Carousel Inner --> 
       <a href="#screenshot-carousel" class="left carousel-control" data-slide="prev"> 
        <span class="glyphicon glyphicon-chevron-left"></span> 
       </a> 
       <a href="#screenshot-carousel" class="right carousel-control" data-slide="next"> 
        <span class="glyphicon glyphicon-chevron-right"></span> 
       </a> 
      </div><!-- end carousel --> 

     </section> 
    </div> 

    <!-- Event Rental Products --> 
    <div class="container"> 
     <section> 
      <div class="page-header" id="eventrental"> 
       <h2>Event Rental Products<small>Browse our selection of rental products</small></h2> 
      </div><!-- End Page Header --> 

      <div class="row"> 
       <div class="col-lg-8"> 
        <h3>This is the heading</h3> 
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed. </p> 
       </div> 
       <div class="col-lg-4"> 
        <img src="img/imac.jpg" class="img-responsive" alt="image"> 
       </div> 
      </div><!-- End Row --> 
      <div class="row"> 
       <div class="col-lg-8"> 
        <h3>This is the heading</h3> 
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed. </p> 
       </div> 
       <div class="col-lg-4"> 
        <img src="https://s3.amazonaws.com/homestratosphere/wp-content/uploads/2014/07/5Way-AccentChairs100.jpg" class="img-responsive" alt="image"> 
       </div> 
      </div><!-- End Row --> 
      <div class="row"> 
       <div class="col-lg-8"> 
        <h3>This is the heading</h3> 
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed. </p> 
       </div> 
       <div class="col-lg-4"> 
        <img src="http://target.scene7.com/is/image/Target/16513837?wid=360&hei=360&qlt=80&fmt=pjpeg" class="img-responsive" alt="image"> 
       </div> 
      </div><!-- End Row --> 

      <hr> 

      <div class="row"> 
       <div class="col-lg-4"> 
        <div class="panel panel-default text-center"> 
         <div class="panel-body"> 
          <span class="glyphicon glyphicon-ok"></span> 
          <h4>This is the heading</h4> 
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p> 
         </div> 
        </div> 
       </div> 
       <div class="col-lg-4"> 
        <div class="panel panel-default text-center"> 
         <div class="panel-body"> 
          <span class="glyphicon glyphicon-cutlery"></span> 
          <h4>This is the heading</h4> 
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p> 
         </div> 
        </div> 
       </div> 
       <div class="col-lg-4"> 
        <div class="panel panel-default text-center"> 
         <div class="panel-body"> 
          <span class="glyphicon glyphicon-leaf"></span> 
          <h4>This is the heading</h4> 
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p> 
         </div> 
        </div> 
       </div> 
      </div><!-- End Row --> 

     </section> 
    </div><!-- End Container --> 

    <!-- Events Served --> 

    <div class="container"> 
     <section> 
      <div class="page-header" id="eventserved"> 
       <h2>Events Served<small>Past events we served</small></h2> 
      </div><!-- End Page Header --> 
     </section> 
    </div><!-- End Container --> 

    <!-- Contact --> 

    <div class="container"> 
     <section> 
      <div class="page-header" id="contact"> 
       <h2>Contact Us<small>Contact us for more</small></h2> 
      </div><!-- End Page Header --> 

      <div class="row"> 
       <div class="col-lg-4"> 
        <p>Send us a message, or contact us from the address below</p> 

        <address> 
         <strong>TCS Event Rentals</strong></br> 
         Lear Dr</br> 
         Burlington, NC 27310</br> 
         P: 1-800-888-8888 
        </address> 
       </div> 

       <div class="col-lg-8"> 
        <form action="" class="form-horizontal"> 
         <div class="form-group"> 
          <label for="user-name" class="col-lg-2 control-label">Name</label> 
          <div class="col-lg-10"> 
           <input type="text" class="form-control" id="user-name" placeholder="Enter your Name"> 
          </div> 
         </div><!-- End Form Group --> 
         <div class="form-group"> 
          <label for="user-email" class="col-lg-2 control-label">Email</label> 
          <div class="col-lg-10"> 
           <input type="text" class="form-control" id="user-email" placeholder="Enter your Email Address"> 
          </div> 
         </div><!-- End Form Group --> 
         <div class="form-group"> 
          <label for="user-url" class="col-lg-2 control-label">Your Website</label> 
          <div class="col-lg-10"> 
           <input type="text" class="form-control" id="user-url" placeholder="If you have any"> 
          </div> 
         </div><!-- End Form Group --> 
         <div class="form-group"> 
          <label for="user-message" class="col-lg-2 control-label">Any Message</label> 
          <div class="col-lg-10"> 
           <textarea name="user-message" id="user-message" class="form-control" cols="20" rows="10" placeholder="Enter your Message"></textarea> 
          </div> 
         </div><!-- End Form Group --> 

         <div class="form-group"> 
          <div class="col-lg-10 col-lg-offset-2"> 
           <button type="submit" class="btn btn-primary">Submit</button> 
          </div> 
         </div> 
        </form> 
       </div> 
      </div><!-- End Row --> 

     </section> 
    </div><!-- End Container --> 

    <!-- Footer --> 

     <footer> 
      <hr> 
      <div class="container text-center"> 
       <h3>Contact Us to plan your next event</h3> 
       <p>Enter your name and email</p> 

       <form action="" class="form-inline"> 
        <div class="form-group"> 
         <label form="subscription">Contact Us</label> 
         <input type="text" class="form-control" id="subscription" placeholder="Your name"> 
        </div> 
        <div class="form-group"> 
         <label form="email">Email Address</label> 
         <input type="text" class="form-control" id="email" placeholder="Enter your Email"> 
        </div> 
         <button type="submit" class="btn btn-primary">Contact Us</button> 
       </form> 

       <hr> 
       <ul class="list-inline"> 
        <li><a href="http://www.twitter.com/slmwebdesignco">Twitter</a></li> 
        <li><a href="http://www.twitter.com/slmwebdesignco">Facebook</a></li> 
        <li><a href="http://www.twitter.com/slmwebdesignco">Youtube</a></li> 
       </ul> 

       <p>&copy;Copyright 2017</p> 
      </div><!--end container --> 

     </footer> 


     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
</body> 

</html>

來源

2017-05-25 Shane M

回答

0

需要相對定位：具有數據間諜=元素「滾動」需要CSS位置屬性，具有「相對」的值，以正常工作。

body { 
    position: relative; 
}

它的工作只是爲相應的散列添加內容，並調整窗口高度以便看到它。

<body data-spy="scroll" data-target="#my-navbar"> 

<!-- Navbar --> 
<nav class="navbar navbar-default navbar-fixed-top" id="my-navbar"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

      <a class="navbar-brand" href="#"><img src="img/logo.jpg"></a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar- 
collapse-1"> 

     <!-- <a href="#contact" class="btn btn-primary navbar-btn navbar-right">Contact Us</a> --> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#aboutus">About Us</a></li> 
      <li><a href="#eventrental">Event Rental Products</a></li> 
      <li><a href="#eventserved">Events Served</a></li> 
      <li><a href="#gallery">Gallery</a></li> 
      <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav><!-- End Navbar --> 




<div id="aboutus" class="container-fluid"> 
    <h1>Section 1</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="eventrental" class="container-fluid"> 
    <h1>Section 2</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="eventserved" class="container-fluid"> 
    <h1>Section 3</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="gallery" class="container-fluid"> 
    <h1>Section 4 Submenu 1</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="contact" class="container-fluid"> 
    <h1>Section 4 Submenu 2</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 


</body>

來源

2017-05-25 01:26:07 LXhelili

+0

嗨，感謝您的回覆，我實際上已經獲得了相對於身體位置的CSS。我會在這裏發佈所有的代碼，也許是其他一些影響它的CSS？無論如何，我都不知道導航欄上的聯繫人是否會突然顯示... –

0

我終於發現，通過更多的研究解決方案，我只是不得不添加CSS：身高：100％;到身體元素。現在一切正常。

來源

2017-06-04 03:16:09

相關問題

 相關問題