整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          Jquery控制頁面達到或滾動到預定的高度效果

          我們需要滾動頁面到達某個高度時,菜單就會點亮所屬該處的菜單項;當我們需要快速定位時,就點擊所屬的菜單項,讓頁面滑到要定位的高度。

          html代碼:

          <header class="js_header">

          <div class="header w1200">

          <a href="#">

          <div class="logo fl">

          <img src="img/red.png" />

          </div>

          </a>

          <ul class="menu fr js_menu">

          <li><a href="index.html#body" class="active">首頁</a></li>

          <li><a href="index.html#about">關于</a></li>

          <li><a href="index.html#service">服務</a></li>

          <li><a href="index.html#team">團隊</a></li>

          <li><a href="index.html#show">作品</a></li>

          <li><a href="index.html#reason">優勢</a></li>

          <li><a href="index.html#price">價錢</a></li>

          <li><a href="index.html#footer">聯系</a></li>

          </ul>

          </div>

          </header>

          <section class="banner" id="banner">banner</section>

          <section class="about" id="about"></section>

          <section class="service" id="service">about</section>

          <section class="team"id="team" >team</section>

          <section class="show"id="show" >show</section>

          <section class="reason"id="reason" >reason</section>

          <section class="price" id="price">price</section>

          <section class="footer"id="footer" >footer</section>

          </html>


          css代碼

          .banner,.about,.service,.team,.show,.reason,.price,.footer{

          height:500px;

          color:black;

          font-size:28px;

          }

          .header .menu {

          padding-top: 20px;

          }

          .header .menu ul{

          list-style: none;

          }

          .header .menu li {

          float: left;

          padding: 5px 10px;

          margin-left: 3px;

          }

          .header .active {

          color: #e6400c;

          }

          js代碼

          <script>.

          $(function() {

          $(window).scroll(function() {

          var _height = $(document).scrollTop();

          //導航

          if(_height > 100) {

          $('.js_header').css({

          'position': 'fixed',

          'top': '0',

          'right': '0',

          'left': '0'

          })

          } else {

          $('.js_header').css({

          'position': 'relative',

          'top': '0',

          'right': '0',

          'left': '0'

          })

          }

          ADDCALSS(_height, '.banner', 0);

          ADDCALSS(_height, '.about', 1);

          ADDCALSS(_height, '.service', 2);

          ADDCALSS(_height, '.team', 3);

          ADDCALSS(_height, '.show', 4);

          ADDCALSS(_height, '.reason', 5);

          ADDCALSS(_height, '.price', 6);

          ADDCALSS(_height, '.footer', 7);

          });

          function ADDCALSS(_height, _classsName, _index) {

          var _serviceH = $(_classsName).offset().top;

          if(_height > _serviceH-60) {

          $('.js_menu a').removeClass("active");

          $('.js_menu a').eq(_index).addClass("active");

          }

          }

          $('.js_menu a').on('click', function(event) {

          event.preventDefault();//阻止默認行為

          $('html,body').animate({

          scrollTop: $("#" + this.href.split("#")[1]).offset().top

          }, 600);

          $('.js_menu a').removeClass('active');

          $(this).addClass('active');

          });

          })

          </script>.


          很棒的一個效果不是嗎?

          ay01

          • absolute ['?bs?lu:t] 絕對的,完全的
          • active ['?ktiv] 活動的,激活的,<a>標簽點擊
          • align [?'lain] 對齊
          • alpha ['?lf?] 透明度,半透明
          • anchor ['??k?] 錨記<a>標記是這個單詞的縮寫
          • arrow ['?r?u] 箭頭
          • auto ['?:t?u] 自動的

          day02

          • background ['b?kgraund] 背景
          • banner ['b?n?] 廣告, 橫幅
          • black [bl?k] 黑色
          • blink: [bli?k] 閃亮,閃爍
          • block [bl?k] 塊
          • blue [blu:] 藍色
          • body ['b?di] 主體,一個HTML標記
          • bold [b?uld] 加粗
          • border ['b?:d?] 邊框、框線 邊框
          • both [b?uθ] 兩者(都);兩個(都);是clear屬性的一個屬性值
          • bottom ['b?t?m] 底;底部,是一個CSS屬性
          • box [b?ks] 箱;盒;匣
          • br 換行標記
          • bug [b?g] 程序設計上的錯誤,漏洞等
          • building ['bildi?] 建筑
          • button ['b?tn] 按鈕

          day03

          • cell [sel] 表格中的單元格
          • center ['sent?] 居中
          • centimeter ['senti,mi:t?] 厘米
          • child [t?aild] 孩子
          • circle ['s?:kl] 圓圈
          • class [klɑ:s] 類別
          • clear [kli?] 清除
          • color ['k?l?] 顏色
          • connected [k?'nektid] 連結的
          • contact ['k?nt?kt] 聯系
          • content [k?n'tent] 內容
          • css 層疊樣式表
          • cursor ['k?:s?] 鼠標指針

          day04

          • dashed [d??t] 虛線CSS邊框常用的一種
          • decimal ['desim?l] 十進制
          • decoration [,dek?'rei??n] 裝飾
          • default [di'f?:lt] 默認的
          • design [di'zain] 設計
          • display [di'splei ] 顯示,CSS的一個屬性
          • division [di'vi??n] 分區,div就是這個單詞的縮寫
          • document ['d?kjum?nt] 文件文檔
          • dotted ['d?tid] 點線
          • double ['d?bl] 雙線

          day05

          • element ['elim?nt] 元素
          • father ['fɑ:e?] 父親,父
          • filter ['filt?] 過濾層;濾器
          • first [f?:st] 第一個
          • fixed [fikst] 固定的,不變的
          • float [fl?ut] 浮動
          • font [f?nt] 字體
          • for 在循環語句中的一個保留字
          • gif 一種圖像格式
          • gray [grei] 灰色
          • green [gri:n] 綠色

          day06

          • hand [h?nd] 手
          • head [hed] 頭部
          • height [hait] 高度
          • help [help] 幫助
          • here [hi?] 這里
          • hidden ['hidn] 被隱藏
          • home [h?um] 首頁
          • horizontal [,h?ri'z?ntl] 水平的
          • hover ['h?v?] 鼠標指針經過或稱為懸浮狀態

          day07

          • image ['imid?] 圖像
          • important [im'p?:t?nt] 重要的
          • indent [in'dent] 縮進
          • index ['indeks] 索引
          • inline 行內
          • inner 內部的
          • italic [i't?lik] 意大利體,斜體
          • jpg 一種圖像格式
          • justify ['d??stifai] 兩端對齊

          day08

          • language ['l??gwid?] 語言
          • last [lɑ:st] 最后一個
          • left [left] 左邊
          • length [le?θ] 長度
          • level ['levl] 級別,例如block-level就是塊級
          • line [lain] 線
          • link [li?k] 鏈接
          • list [list] 列表
          • lowercase ['l?u?,keis] 小寫
          • margin ['mɑ:d?in] 外邊距
          • max 最大的
          • medium ['mi:di?m] 中間
          • menu ['menju:] 菜單
          • middle ['midl] 中間
          • millimeter ['mili,mi:t?] 毫米
          • min 最小的
          • model ['m?dl] 模型
          • move [mu:v] 移動

          day09

          • navigation [,n?vi'gei??n] 導航
          • new [nju:] 新的
          • none [n?n] 無,沒有
          • normal ['n?:m?l] 標準
          • object ['?bd?ikt] 對象
          • oblique [?b'li:k] 一種斜體
          • only ['?unli] 僅僅
          • open ['?up?n] 打開
          • optional ['?p??n?l] 可選的
          • orange ['?:rind?] 橙色
          • outer ['aut?] 外面的
          • overflow [,?uv?'fl?u] 溢出
          • padding ['p?di?] 內邊距
          • point [p?int] 點
          • pointer ['p?int?] 指針,指示器
          • position [p?'zi??n] 定位,位置
          • progress ['pr?ugres] 進度
          • public ['p?blik] 公開的
          • purple ['p?:pl] 紫色

          day10

          • red [red] 紅色
          • relative ['rel?tiv] 相對的
          • repeat [ri'pi:t] 重復,平鋪
          • replacement [ri'pleism?nt] 替換
          • resize 重新設置大小
          • right [rait] 右邊
          • row [r?u] 行
          • scroll [skr?ul] 滾動
          • shadow ['??d?u] 陰影
          • silver ['silv?] 銀色
          • size [saiz] 尺寸
          • solid ['s?lid] 固體,實線
          • solution [s?'lu:??n] 方案
          • span [sp?n] 一個HTML標記
          • special ['spe??l] 特殊的
          • square [skw??] 方塊
          • static ['st?tik] 靜態的
          • strong [str??] 強壯,加粗的
          • style [stail] 樣式

          day11

          • table ['teibl] 表格
          • td 單元格的HTML標記
          • text [tekst] 文本
          • thick [θik] 粗的
          • thin [θin] 細的
          • three [θi:] 三個
          • through [θru:] 穿過
          • title ['taitl] 標題
          • top [t?p] 頂部
          • tr 表格中“行”的HTML標記
          • transitional [tr?n'zi??n?l] 過渡的
          • type [taip] 類型

          day12

          • underline [,?nd?'lain] 下劃線
          • upper ['?p?] 上面的
          • uppercase ['?p?,keis] 大寫
          • url 網址
          • vertical ['v?:tik?l] 豎直的
          • visited ['vizit] 訪問過的
          • while [hwail] 白色的
          • width [widθ] 寬度

          幾天我在面試前端開發同學的時候,有問到關于margin基礎布局相關內容的過程中,發現很多同學基本解釋不清楚,今天剛好有點時間就整理了一篇筆記出來。就以下5點在CSS布局經常會用到的經典布局解決方案。

          1. css中margin外邊距(重疊)合并現象
          2. css中margin外邊距穿透現象
          3. css中margin設置負值時的特性
          4. css經典3列自適應布局:圣杯布局
          5. css經典3列自適應布局:雙飛翼布局

          可以嘗試動手試一試,有什么疑問 !可隨時交流,有問必答 。

          margin 縱向重疊(合并)問題

          元素垂直排列時,第一個元素的下外邊距與第二個元素的上外邊距會發生合并,合并后的間距就是兩者中最大的那個值。

          1、以下代碼中,item1與item4之間的間距是多少?

          <style>
              .box{
                  margin-top:10px;/*上外邊距*/
                  margin-bottom:20px;/*下外邊距*/
                  height: 20px;
                  background-color:skyblue;
              }
          </style>
          <body>
              <div class="box">item1</div>
              <div class="box"></div>
              <div class="box"></div>
              <div class="box">item4</div>
          </body>

          答案:

          解析:item1 與 item4 之間的間距為 3個下外邊距大小+2個盒子高度=20*3+20*2=100px

          2、以下代碼中,item1與item4之間的間距是多少 ?

          <style>
              .box{
                  margin-top:10px;
                  margin-bottom:20px;
                  background-color:skyblue;
              }
          </style>
          <body>
              <div class="box">item1</div>
              <div class="box"></div>
              <div class="box"></div>
              <div class="box">item4</div>
          </body>

          答案: item1與item4之間間距為 20px

          解析:因為中間兩個box中沒有內容也沒有邊框線,所以外邊距會一直重疊合并,所以最后item1和item4之間距離只有一個下外邊距的大小

          3、以下代碼中 container 、 item 、box與瀏覽器頂部的間距是多少 ?

          margin 穿透問題

          當一個元素包含在另一個元素中時,如果父元素沒有設置內邊距或邊框把外邊距分隔開,它們的上或下外邊距也會發生合并。

          <style>
              body{
                  margin:0;
                  padding:0;
              }
              .container{
                  width:300px;
                  height: 300px;
                  background-color: salmon;   
                  margin-top:100px;/*與瀏覽器頂部的距離*/
                  border:5px solid blue;
              }
              .container .item{
                  width:200px;
                  height: 200px;
                  background-color: skyblue;
                  margin-top:50px;/*因為container中加了border邊框,所以這里的外邊距不會穿透合并*/
              }
              .container .item .box{
                  width:100px;
                  height: 100px;
                  background-color: bisque;
                  margin-top:10px;/*item沒有加邊框線,內邊距和其它內容,所以外邊距會發生穿透合并*/
                  border:5px solid red;
              }
          </style>
          <body>
              <div class="container">
                  <div class="item">
                      <div class="box"></div>
                  </div>
              </div>
          </body>



          答案: 100px 、155px、155px

          解析:

          .container與瀏覽器頂部距離是100px,

          .item與瀏覽器頂部距離100px + 5px+50px=155px

          .box與瀏覽器頂部距離:100px+5px+50px=155px

          margin負值問題

          margin-left 設置負值,元素向左移動

          margin-right 設置負值,自身不受影響,右邊元素向左移動

          margin-top設置負值,元素向上移動

          margin-bottom 設置負值,自身不受影響,下方元素向上移動

          1、 兩元素水平排列,左右外邊距設置負值時

          <style>
              body{
                  margin:0;
              }
              .container{
                  width:500px;
                  height:200px;
                  padding:20px 0px;
                  border:5px solid #ddd;
                  margin:0px auto;
              }
              .container .common{
                  width:200px;
                  height: 200px;
                  float: left;
              }
              .container .box1{
                  background-color: skyblue;
                  /* margin-left:-100px; 元素自身向左移動,右邊的元素也會受影響*/
                  margin-right:-100px;/*元素自身不受影響,右邊元素向左移動*/
              }
              .container .box2{
                  background-color: tomato;
              }
          </style>
          <body>
              <div class="container">
                  <div class="box1 common"></div>
                  <div class="box2 common"></div>
              </div>
          </body>



          當.container .box1中margin-left:-100px;時,如:圖1

          .container .box1margin-right:-100px;時,如:圖2

          .container .box1設置margin-left:-100px;margin-right:-100px時,如:圖3

          2、兩元素垂直排列,上下外邊距設置負值時

          <style>
              body{
                  margin:0;
              }
              .container{
                  height: 500px;
                  width: 200px;
                  padding:0px 20px;
                  border:5px solid #ddd;
                  margin-top:100px;
              }
              .container .common{
                  width:200px;
                  height: 200px;
              }
              .container .box1{
                  background-color: skyblue;
                  /*margin-top:-100px;元素向上移動,下方元素也會受影響*/
                  margin-bottom:-100px;/*自身不受影響,下方元素向上移動*/
              }
              .container .box2{
                  background-color: rgba(0,0,255,0.5);
              }
          </style>
          
          <body>
              <div class="container">
                  <div class="box1 common"></div>
                  <div class="box2 common"></div>
              </div>
          </body>



          當.container .box1中margin-top:-100px時,如:圖 1

          當.container .box1中margin-bottom:-100px時,如:圖 2

          當.container .box1中同時設置margin-top:-100px; 和margin-bottom:-100px;時,如:圖 3

          3、經典布局:圣杯布局

          這種布局的優點

          中間一欄內容最重要,最先加載和渲染,同時對搜索引擎優化最利。

          兩邊內容固定,中間內容自適應



          <style>
              body{
                  margin:0;
                  /*核心代碼*/
                  min-width: 650px;/*當頁面寬度不夠時,出現滾動條而不會造成布局錯亂*/
              }
              .clearfix::after{
                  display: block;
                  content: "";
                  clear: both;
              }
              .fl{/*核心代碼*/
                  float:left;/*三個盒子一定要添加浮動*/
              }
              .header{
                  height: 100px;
                  background-color: tomato;
              }
          
              .container{
                  padding-left:200px;/*左邊預留200px位置  用來放left*/
                  padding-right:250px;/*右邊預留200px位置  用來放right*/
              }
              .container .center{
                  width:100%;/*自適應container的寬度,實現自適應縮放*/
                  height: 500px;
                  background-color: skyblue;
              }
              .container .left{
                  width:200px;
                  height: 500px;
                  background-color:cadetblue;
                  /*核心代碼*/
                  margin-left:-100%;/*盒子向左移,因為加了浮動,所以會移動到上一行的最左邊*/
                  position: relative;/*利用相對定位,再把盒子往左移200px就占據了最左邊預留的200px空間*/
                  left:-200px;
              }
              .container .right{
                  width:250px;
                  height: 500px;
                  background-color:aquamarine;
                  /*核心代碼*/
                  margin-right:-250px;/*加上這個代碼,相當于right沒有一點寬度,就會移動到上的最右邊位置*/
              }
              .footer{
                  height: 100px;
                  background-color: #000;
              }
          </style>
          <body>
              <div class="header">頭部</div>
              <div class="container clearfix">
                  <div class="center fl">中間</div>
                  <div class="left fl">左邊</div>
                  <div class="right fl">右邊</div>
              </div>
              <div class="footer">底部</div>
          </body>

          4、經典布局:雙飛翼布局

          這種布局的優點

          中間一欄內容最重要,最先加載和渲染,同時對搜索引擎優化最利。

          兩邊內容固定,中間內容自適應



          <style>
              body{
                  margin:0;
              }
              .fl{/*核心代碼*/
                  float: left;/*一定要添加浮動*/
              }
              .main{
                  background-color: #ddd;
                  width:100%;
              }
              .main .main-content{
                  background-color: skyblue;
                  height: 300px;
                  /*核心代碼*/
                  margin:0 200px 0 200px;/*盒子左右兩邊余留200px,分別給left和right來占用*/
              }
              .left{
                  width: 200px;
                  height: 300px;
                  background-color: coral;
                  /*核心代碼*/
                  margin-left:-100%;/*往左移動瀏覽器的寬度,最后移動到上一行的最左邊*/
              }
              .right{
                  width: 200px;
                  height: 300px;
                  background-color: tomato;
                  /*核心代碼*/
                  margin-left:-200px;/*相當于自身寬度為0了,因為加了浮動,然后就顯示在了上一行的最右邊*/
              }
          </style>
          <body>
              <div class="main fl">
                  <div class="main-content">中間</div>
              </div>
              <div class="left fl">左邊</div>
              <div class="right fl">右邊</div>
          </body>

          為幫助到一部分同學不走彎路,真正達到一線互聯網大廠前端項目研發要求,首次實力寵粉,打造了《30天挑戰學習計劃》,內容如下:

          HTML/HTML5,CSS/CSS3,JavaScript,真實企業項目開發,云服務器部署上線,從入門到精通

          • PC端項目開發(1個)
          • 移動WebApp開發(2個)
          • 多端響應式開發(1個)

          共4大完整的項目開發 !一行一行代碼帶領實踐開發,實際企業開發怎么做我們就是怎么做。從學習一開始就進入工作狀態,省得浪費時間。

          從學習一開始就同步使用 Git 進行項目代碼的版本的管理,Markdown 記錄學習筆記,包括真實大廠項目的開發標準和設計規范,命名規范,項目代碼規范,SEO優化規范

          從藍湖UI設計稿 到 PC端,移動端,多端響應式開發項目開發

          • 真機調試,云服務部署上線;
          • Linux環境下 的 Nginx 部署,Nginx 性能優化;
          • Gzip 壓縮,HTTPS 加密協議,域名服務器備案,解析;
          • 企業項目域名跳轉的終極解決方案,多網站、多系統部署;
          • 使用 使用 Git 在線項目部署;

          這些內容在《30天挑戰學習計劃》中每一個細節都有講到,包含視頻+圖文教程+項目資料素材等。只為實力寵粉,真正一次掌握企業項目開發必備技能,不走彎路 !

          過程中【不涉及】任何費用和利益,非誠勿擾 。

          如果你沒有添加助理老師微信,可以添加下方微信,說明要參加30天挑戰學習計劃,來自頭條號!老師會邀請你進入學習,并給你發放相關資料

          30 天挑戰學習計劃 Web 前端從入門到實戰 | arry老師的博客-艾編程


          主站蜘蛛池模板: 福利一区二区三区视频午夜观看| 少妇一夜三次一区二区| 91精品一区二区综合在线| 久久99精品国产一区二区三区 | 久久高清一区二区三区| 亚洲熟女少妇一区二区| 精品一区二区久久| 精品无人区一区二区三区| 亚洲大尺度无码无码专线一区| 精品免费国产一区二区三区| 日韩一区二区三区免费播放| 中文字幕一区二区人妻| 极品尤物一区二区三区| 国产女人乱人伦精品一区二区| 精品福利一区二区三区精品国产第一国产综合精品 | 无码国产精品一区二区高潮| 亚洲视频一区二区| 日韩精品无码一区二区三区不卡| 欧美激情一区二区三区成人| 中文字幕一区二区三区免费视频| 久久精品国产第一区二区三区| 无码一区二区三区中文字幕| 一区二区三区无码视频免费福利| 国产91大片精品一区在线观看| 无码精品人妻一区二区三区影院| 亚洲一区二区三区夜色 | 国产AⅤ精品一区二区三区久久| 少妇人妻精品一区二区三区| 婷婷国产成人精品一区二| 无码国产精品一区二区免费式芒果| 日韩一区二区三区免费体验| 国产激情з∠视频一区二区| 国产精品一区二区在线观看| 无码国产精品一区二区免费vr | 色老板在线视频一区二区 | 无码人妻AⅤ一区二区三区水密桃 无码欧精品亚洲日韩一区夜夜嗨 无码毛片一区二区三区中文字幕 无码毛片一区二区三区视频免费播放 | 国产一区在线播放| 久久精品免费一区二区| 东京热无码一区二区三区av| 乱码人妻一区二区三区| 日韩一区二区在线观看视频|