HTML导航栏无法捕捉到浏览器屏幕的顶部

时间：2017-05-09 04:39:56

标签： jquery html css

以下是行动中的问题：http://crowleywebdesign.com

当我向下滚动屏幕顶部的导航栏修复时，但在此过程中，它会导致底部向上捕捉，这是我不想要的。我希望过渡顺利。这是我正在使用的JQuery函数：

<!-- JQuery function for navbar-fixed-top -->
<script> 
$(document).ready(function() {

$(window).scroll(function () {
    //if you hard code, then use console
  //.log to determine when you want the 
  var d = $('#jumbo');
if ($(window).scrollTop() > d.prop("scrollHeight") ) {
  $('#nav_bar').addClass('navbar-fixed-top');
}
if ($(window).scrollTop() < d.prop("scrollHeight")) {
  $('#nav_bar').removeClass('navbar-fixed-top');
}

});
});
</script>

感谢您的帮助！

2 个答案:

答案 0 :(得分：1)

由于您使用的是bootstrap，如果您尝试这样做会很好。

Link

您可以使用Affix插件来解决您的问题。

OR

添加css 

.navbar-fixed-top + #portfolio {
    padding-top: 60px;
}

这将使您的滚动顺利。

答案 1 :(得分：1)

这是因为当导航栏被修复时，身体需要一个50px的上边距...试试这个解决方案......

全屏查看并慢慢使用滚动条查看其实际工作

$(document).ready(function() {

  $(window).scroll(function() {
    //if you hard code, then use console
    //.log to determine when you want the 
    var d = $('#jumbo');
    if ($(window).scrollTop() > d.prop("scrollHeight")) {
      $('#nav_bar').addClass('navbar-fixed-top');
      $('body').css('margin-top','50px');
    }
    if ($(window).scrollTop() < d.prop("scrollHeight")) {
      $('#nav_bar').removeClass('navbar-fixed-top');
      $('body').css('margin-top','0px');
    }

  });
});
if ($(window).width() > 739) {
  //Add your javascript for large screens here
  var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    slidesPerView: 3,
    paginationClickable: true,
    spaceBetween: 30
  });
} else {
  //Add your javascript for small screens here 
  var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    slidesPerView: 1,
    paginationClickable: true,
    spaceBetween: 30
  });
}
.boxes {
  background-color: linen;
}

.navbar-fixed {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
  background-color: red;
}
<script src="http://crowleywebdesign.com/swiper.min.js"></script>
<script src="http://crowleywebdesign.com/resources/bootstrap.min.js"></script>
<link href="http://crowleywebdesign.com/resources/main.css" rel="stylesheet"/>
<link href="http://crowleywebdesign.com/resources/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron jumbotron-fluid" id="jumbo">
  <div class="container">
    <div class="row">
      <div class="lock col-xs-3 col-md-offset-1 col-md-2 text-center">
        <img src="img/logo/Lock.png" align="right" style=" width:100%;">
      </div>
      <div class="col-xs-9">
        <h1>Crowley Design &amp; Development</h1>
        <p class="lead">Web Design - Branding - Marketing - Search Engine Optimization</p>
      </div>
    </div>
  </div>
</div>
<!-- Navbar-->
<div id="nav_bar" class="navbar-custom">
  <nav class="row navbar navbar-default">
    <div class="container-fluid">
      <!--Brang and toggle grouped for mobile-->
      <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" style="font-family: 'Open Sans Condensed', sans-serif;" href="#"><i>Crowley Design</i></a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#portfolio">Our Work</a></li>
          <li><a href="#about">Us</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact Us</a></li>
          <li><a href="#">Payments</a></li>
        </ul>

      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
</div>

<!-- Portfolio Grid Section -->
<section id="portfolio">
  <div class="container">
    <div class="porfolio_title row">
      <div class="col-lg-12 text-center">
        <h1>Project Portfolio</h1>
        <!--<hr class="star-primary">-->
      </div>
    </div>
    <div class="port_height row">
      <!--Start Swiper-->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <!-- Queen's Space Conference -->
          <div class="swiper-slide">
            <div class="portfolio-item">
              <a href="#portfolioModal_QSC" class="portfolio-link" data-toggle="modal">
                <div class="caption">
                  <div class="caption-content">
                    <h4>Space Conference</h4>
                    <i class="fa fa-search-plus fa-2x"></i>
                  </div>
                </div>
                <img src="img/portfolio/qsc.png" class="img-responsive" alt="Circus tent" style="border-radius: 15px;">
              </a>
            </div>
          </div>

          <!-- QUEngComp -->
          <div class="swiper-slide">
            <div class="portfolio-item">
              <a href="#portfolioModal_QUEngComp" class="portfolio-link" data-toggle="modal">
                <div class="caption">
                  <div class="caption-content">
                    <h4>QUEngComp</h4>
                    <i class="fa fa-search-plus fa-2x"></i>
                  </div>
                </div>
                <img src="img/portfolio/quengcomp.png" class="img-responsive" alt="Circus tent" style="border-radius: 15px;">
              </a>
            </div>
          </div>
          <!-- Light Bike -->
          <div class="swiper-slide">
            <div class="portfolio-item">
              <a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
                <div class="caption">
                  <div class="caption-content">

                    <h4>Lit-Bike</h4>
                    <i class="fa fa-search-plus fa-2x"></i>
                  </div>
                </div>
                <img src="img/portfolio/litbike.png" class="img-responsive" alt="Slice of cake" style="border-radius: 15px;">


              </a>
            </div>
          </div>

          <!-- Personal Website -->
          <div class="swiper-slide">
            <div class="portfolio-item">
              <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">


                <div class="caption">
                  <div class="caption-content">
                    <h4>My Website!</h4>
                    <i class="fa fa-search-plus fa-2x"></i>

                  </div>
                </div>
                <img src="img/portfolio/mysite.png" class="img-responsive" alt="Cabin" style="border-radius: 15px;">
              </a>
            </div>
          </div>
          <!-- QUExamBoss -->
          <div class="swiper-slide">
            <div class="portfolio-item">
              <a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
                <div class="caption">
                  <div class="caption-content">
                    <h4>QU-ExamBoss</h4>
                    <i class="fa fa-search-plus fa-2x"></i>
                  </div>
                </div>
                <img src="img/portfolio/quexamboss.png" class="img-responsive" alt="Circus tent" style="border-radius: 15px; border-color: black; border-width: 4px; border-style: solid;">
              </a>
            </div>
          </div>

        </div>
        <!--End Swiper-->
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
      <!--End Swiper-->
    </div>
    <!--End Row-->
</section>

<section id="about">
  <div class="continaer">
    <div class="header_title row">
      <div class="col-lg-12 text-center">
        <h1>About Us</h1>
        <!--<hr class="star-primary">-->
      </div>
    </div>
  </div>
</section>

<section id="services">
  <div class="container">
    <div class="services_title row">
      <div class="col-lg-12 text-center">
        <h1>Our Services</h1>
        <!--<hr class="star-primary">-->
      </div>
    </div>
  </div>
</section>

<section id="contact">
  <div class="continaer">
    <div class="contact_title row">
      <div class="col-lg-12 text-center">
        <h1>Contact Us</h1>
        <!--<hr class="star-primary">-->
      </div>
    </div>
  </div>
</section>

相关问题
最新问题