编程随想

会python真的可以为所欲为 by Python自学0(回) 365天前

这里还有人吗 by mikeKil1(回) 550天前

这里还有人吗 by mikeKil0(回) 550天前

每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。 by js特效0(回) 774天前

到处都是羊，不想上班 by Python自学0(回) 854天前

鸽子 by 张书娥0(回) 859天前

云代码 - javascript代码库

仿花瓣网的自动悬浮导航效果 jquery

2012-09-15 作者：神马举报

[javascript]代码库

<!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>仿花瓣网的自动悬浮导航效果</title>
<style type="text/css">
body, h1, ul {
    margin:0;
}
ul li {
    list-style-type:none;
}
#header {
    width:100%;
    border-top:solid 1px #ccc;
    border-bottom:solid 1px #ccc;
    text-align:center;
}
h1 {
    padding:10px 0;
    color:#D74452;
}
.nav {
    width:100%;
    background:#fff;
    margin:20px auto 0;
    border:solid 1px #ccc;
    zoom:1;
    border-radius:5px;
    box-shadow:0 1px 6px rgba(0, 0, 0, 0.1);
    color:#D74452;
}
.nav_scroll {
    position:fixed;
    width:100%;
    margin:0;
    left:0;
    top:0;
}
.nav:after {
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.nav ul li {
    float:left;
    margin:0 20px;
    height:30px;
    line-height:30px;
}
.nav ul li a {
    cursor:pointer;
}
.nav ul li a:hover {
    text-decoration:underline;
}
h2 {
    height:400px;
    line-height:400px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
                var topMain=$("#header").height()+20//是头部的高度加头部与nav导航之间的距离。
                var nav=$(".nav");
                $(window).scroll(function(){
                    if ($(window).scrollTop()>topMain){//如果滚动条顶部的距离大于topMain则就nav导航就添加类.nav_scroll，否则就移除。
                        nav.addClass("nav_scroll");
                    }
                    else
                    {
                        nav.removeClass("nav_scroll");
                    }
                });
      
        })
</script>
</head>
 
<body>
<div id="header">
  <h1>花瓣网</h1>
</div>
<!--header-->
<div class="nav">
  <ul>
    <li><a>关注</a></li>
    <li><a>最新</a></li>
    <li><a>最热</a></li>
    <li><a>视频</a></li>
    <li><a>家居</a></li>
    <li><a>旅行</a></li>
  </ul>
</div>
<!--nav-->
<div style="background:#f9f9f9;color:#000;" id="cont">
  <h2>1</h2>
  <h2>2</h2>
  <h2>3</h2>
  <h2>4</h2>
  <h2>5</h2>
  <h2>6</h2>
  <h2>7</h2>
  <h2>8</h2>
  <h2>1</h2>
  <h2>2</h2>
  <h2>3</h2>
  <h2>4</h2>
  <h2>5</h2>
  <h2>6</h2>
  <h2>7</h2>
  <h2>8</h2>
</div>
</body>
</html>