Question

我使用position: sticky来粘贴低于文档开头的标题（接近42px）。当我设置粘性位置和top:0属性时，因为我想使用jQuery on(scroll)事件来获取粘性元素的位置，并且已经转换为$.addClass(someClass)。

但是在连接到Chrome PC浏览器检查程序的console.log中，它显示当前固定位置为top:0，即使标题位于窗口顶部42px处。

HTML

<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>

SCSS

 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;
}

JS：

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

Answer 1

尝试使用以下示例与您的html和css代码

$(document).ready(function() {
	var s = $(".sticker");
	var pos = s.position();					   
	$(window).scroll(function() {
		var windowpos = $(window).scrollTop();
		if (windowpos >= pos.top ) {
			s.addClass("stick");
		} else {
			s.removeClass("stick");	
		}
	});
});

div.wrapper {
	margin: 260px auto;
	width:600px;
	background:#efe;
  height: 3900px;
}
div.sticker {
	padding: 20px;
	margin: 20px 0;
	background: #ece;
	width: 190px;
}
.stick {
	position:fixed;
	top:0px;
}
.marker {
  position: absolute;
  top: 1000px;
  right: 100px;
  font-size: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="wrapper">
    <div class="sticker">fixed pos </div>
</div>

位置粘贴工作不正确？

1 个答案: