10-CSS 相关操作

CSS 相关操作

CSS()方法

    // 获取元素的css
    $("h1").css("font-size");
    
    // 设置css
    $("h1").css("font-size","14px");
    
    // 设置多个css属性
    $("h1").css({"font-size"："14px","color":"red"});
    

位置

offset()
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性：top 和 left。

position()
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性：top 和 left。

scrollLeft()
获取匹配元素相对滚动条左侧的偏移; scrollLeft(300)
设置元素相对滚动条左边的偏移值

scrollTop()
获取匹配元素相对滚动条上边的偏移; scrollTop(300)
设置元素相对滚动条上边的偏移值

案例 固定到顶部的导航

html

offset 距离
banner
nav
line1
line2
...
line99
line100

js

// 思路：只要滚动的距离 大于 元素 nav 距页面顶部的距离  让 nav 固定定位  else   就 默认定位
$(function(){
    var offT=$(".nav").offset().top;
    //nav 距离顶部的距离
    $(window).scroll(function(){
    //窗口发生滚动事件
        var scrollT=$(window).scrollTop();
        //窗口滚动条滚过去的距离
        if(scrollT>offT){
        //如果大于这个距离添加一个固定的class
            $(".nav").addClass("fixed")
            $("body").css("padding-top","50px")
        }else{
            $(".nav").removeClass("fixed")
            $("body").css("padding-top","0")
        }
        
    })
})

CSS

.banner{ 
    height:500px ;
    background-color:lightgreen;
}

.nav{ 
    height: 50px; 
    background-color: lightsalmon;
}

.fixed{
    position: fixed;
    top: 0; 
    width: 100%;
    left: 0; 
    z-index: 10;
   /* 注意要写 z-index 不然会被遮盖到下面*/
}