0

In my project, I create a scrollspy like http://jsfiddle.net/hiepnx/8SDQZ/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css") />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>

<body data-spy="scroll" data-target="#main-nav">
<div class="container">
<header class="row">
 <!-- Navigation Bar -->
      <nav id="main-nav" class="navbar navbar-default navbar-fixed-top navbar-inverse darken" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <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="#"></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#slider">Home</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#testimonials">Testimonials</a></li>

          </ul>
        </div><!-- /.navbar-collapse -->
      </nav><!-- End of Navigation Bar -->
  </header>
  <section id="slider" style="height:900px; background-color:red;">
  </section>
    <section id="services" style="height:900px; background-color:yellow;">
  </section>
    <section id="portfolio" style="height:900px;background-color:purple;">
  </section>
    <section id="testimonials" style="height:900px;">
  </section>
</div>
</body>
</html>

Now, I want to make the effect like in homepage of mediafire.com.

The effect is the navbar is invisible in first page and only become visible when we scroll to second page.

How can I do it?

Thanks,

4

2 回答 2

1

You can set the navbar invisible at the page load and after you reach the second page you can set it visible using following event:

$('#myScrollspy').on('activate.bs.scrollspy', function () {
    // check if second page is activated then set navbar visible
});

Explanation:

This event fires whenever a new item becomes activated by the scrollspy.

More info about this event check getbootstrap scrollSpy

于 2014-05-21T07:06:39.877 回答
0

Try this Working Fiddle. I used .scrollTop() > 750. It means from top until you reach your desired 'value' which I set "750" for example, the fadein/fadeout will take effect. Hope it helps.

JQUERY:

$('#main-nav').hide();
$(window).scroll(function() {
    if ($(this).scrollTop() > 750)
     {
        $('#main-nav').fadeIn();
     }
    else
     {
      $('#main-nav').fadeOut();
     }
 });

NOTE : use can use .show/.hide if you don't like the fadein/fadeout effect.

于 2014-05-21T08:36:05.310 回答