Javascript 位置不正确？_Javascript_Jquery_Css

Javascript 位置不正确？

javascript jquery css

Javascript 位置不正确？,javascript,jquery,css,Javascript,Jquery,Css,我使用position:sticky来粘贴头，头保持在略低于文档开始的位置（接近下面的42px）。当我设置粘滞位置和top:0属性时，我想使用jQueryon（scroll）事件获取粘滞元素的位置，并对$.addClass（someClass）进行转换但在连接到Chrome PC浏览器检查器的console.log中，它始终将当前的固定位置显示为top:0，即使标题离窗口顶部42px HTML JS: 尝试在html和css代码中使用下面的示例 $（文档）.ready（函数（）{ var s

我使用

position:sticky

来粘贴头，头保持在略低于文档开始的位置（接近下面的42px）。当我设置粘滞位置和

top:0

属性时，我想使用jQuery

on（scroll）

事件获取粘滞元素的位置，并对

$.addClass（someClass）

进行转换

但在连接到Chrome PC浏览器检查器的console.log中，它始终将当前的固定位置显示为

top:0

，即使标题离窗口顶部42px

HTML

JS:

尝试在html和css代码中使用下面的示例

$（文档）.ready（函数（）{
var s=$（“.sticker”）；
var pos=s.位置（）；
$（窗口）。滚动（函数（）{
var windowpos=$（window.scrollTop（）；
如果（窗口位置>=位置顶部）{
s、 addClass（“stick”）；
}否则{
s、 移除类（“棒”）；
}
});
});
div.wrapper{
利润率：260px自动；
宽度：600px；
背景：#efe；
高度：3900px；
}
分区贴纸{
填充：20px；
利润率：20px0；
背景：欧洲经委会；
宽度：190px；
}
.棍子{
位置：固定；
顶部：0px；
}
.马克{
位置：绝对位置；
顶部：1000px；
右：100px；
字号：2em；
}

固定位置
URL:URL类别：网络钓鱼、互联网服务声誉：高Risk@PaulAbbott这不是钓鱼的地方。。。它的演示模板站点。免费域名.tk连接到hostinger.com.ua主机系统
<body>
<div class="top-head">
    <div class="container"> 
        <div class="contact">
            <div class="contact-field">
                <a href="mailto:info@reen.com">
                    <img src="img/icon-mail.png" alt="">
                    <p>info@reen.com</p>
                </a>
            </div>
            <div class="contact-field">
                <a href="tel:+00 (123) 456 78 90">
                    <img src="img/icon-phone.png" alt="">
                    <p>+00 (123) 456 78 90 </p> 
                </a>
            </div>
        </div>
        <div class="social-network">
            <ul>
                <li><a href=""><img src="./img/icon-facebook.png" alt=""></a></li>
                <li><a href=""><img src="./img/icon-google.png" alt=""></a></li>
                <li><a href=""><img src="./img/icon-twitter.png" alt=""></a></li>
                <li><a href=""><img src="./img/icon-pinterest.png" alt=""></a></li>
                <li><a href=""><img src="./img/icon-behance.png" alt=""></a></li>
                <li><a href=""><img src="./img/icon-dribbble.png" alt=""></a></li>
            </ul>
        </div>
    </div>
</div>
<header>
    <div class="container">
        <div class="header-box">    
            <a href="" class="logo">
                <img src="./img/logo.png" alt="">
            </a>
            <nav>
                <div><a href="">Home</a></div>
                <div><a href="">Portfolio</a></div>
                <div><a href="">Blog</a></div>
                <div><a href="">Pages</a></div>
                <div><a href="">Features</a></div>
                <div><a href="">Mega Menu</a></div>
                <div><a href="">Contact</a></div>
            </nav>
            <div class="search">
                <button type="image" name="submitSearchIco" class="deco-button"> 
                    <img src="./img/icon-find.png" alt="Search" class="deco-button">
                </button>
                <button type="submit" name="submitSearch" class="subm-button" for="searchFor"> 
                    <img src="./img/icon-find.png" alt="Search" class="subm-button">
                </button>
                <input type="text" name="searchFor" id="search-inp" class>
            </div>
        </div>  
    </div>
</header>

 header{
    position: sticky;
    top: 0;
    z-index: 10;
    font-size: 1.25rem;
    text-transform: uppercase;
    background: white;
    padding: 2.5% 0;
    transition: padding .5s;
    }
.transform-header{
    padding: 1.5% 0;
}

$(window).on('scroll', function() {
    console.log($('header').scrollTop());
    if($('header').scrollTop() === 0){
        $('header').addClass('transform-header');
    }
});