我搜索了,但找不到任何东西。
在页面上向下滚动后,我在页面上显示了一个粘性 header 。这在页面上运行非常好。但是,不幸的是,现在我不得不将其放入iframe中。
我必须使用完全相同的代码,但我相信是window.scroll导致其跳闸。内容仅位于页面顶部,位于所有内容的后面,并且在检查代码时会停止在该功能上,并且不会继续进行下去。
是否可以使用window.scroll(或滚动功能)替代方法,还是可以使其在iframe中工作?我所有的尝试都失败了。
我的例子在这里https://www.bootply.com/edHiY15iJy#
我的HTML header
<div class="container">
<header class="header-wrapper">
<div class="sticky-header">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="bold">Customer Name: </label>
<label>Person!! </label>
</div>
<div class="form-group">
<label class="bold">Address: </label>
<label>101 Main Street </label>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="bold">Email:</label>
<label>[email protected] </label>
</div>
<div class="form-group">
<label class="bold">City, State:</label>
<label>Tavierner, FL </label>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="bold">Phone:</label>
<label>555-555-5555 </label>
</div>
<div class="form-group">
<label class="bold">Club Code:</label>
<label>456 </label>
<label class="bold">Associate#:</label>
<label>45 </label>
</div>
</div>
</div>
</div>
</header>
<section>
<p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
<p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
<p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
<p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
<p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
<p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
<p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
<p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
<p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
<p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
<p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
<p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
<p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
</section>
</div>
和我的jQuery
if ($('.sticky-header').length >= 1) {
$(window).scroll(function () {
var header = $(document).scrollTop();
var headerHeight = $('.header-wrapper').height();
if (header > headerHeight) {
$('.sticky-header').addClass('sticky');
$('.sticky-header').fadeIn();
} else {
$('.sticky-header').removeClass('sticky');
}
});
}
屏幕菜单不起作用时的屏幕截图:
最佳答案
我会发表评论,但是我还没有获得足够的声誉。 (对不起)
我在SO上找到了this。
由于您尝试检测iframe中的滚动事件,因此天际线的答案应该会有所帮助。
关于jquery - iframe中的Window.scroll,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47537061/