iframe中的Window.scroll
我找了，但什么也找不到。
在页面上滚动后，我有一个显示在页面上的粘性标题。这在这页上做得很好。然而，不幸的是，我现在不得不把它放在一个iframe中。
我必须使用相同的代码，但我相信是window.scroll导致它出错的。内容只是停留在页面的顶部，在所有的东西后面，当检查代码时，它就停留在这个函数上，不再做进一步的工作。
是否有一种替代window.scroll (或滚动函数)的方法，或者有一种使其在iframe中工作的方法？我所有的尝试都失败了。
我的例子是在这里https://www.bootply.com/edHiY15iJy#
标题的HTML
<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>something@email.com </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');
}
});
}当菜单不起作用时的屏幕截图：
回答 6
Stack Overflow用户
发布于 2017-12-01 12:56:44
我本可以评论的，但我还没有得到足够的声誉。(对不起)我在上面找到了这。因为您正在尝试检测iframe中的滚动事件，skyline的回答应该是有帮助的。
Stack Overflow用户
发布于 2017-12-05 13:38:12
这里的问题是卷轴在哪里应用。
如果卷轴在文档上应用，JS在这个文档中，而iframe有滚动，那么它应该像jQuery doc：请看这里的最后一个演示那样工作。
也许试着用演示替换iframe的内容，看看它是否有效。
一个直接可行的解决方案是返回页面中的滚动，只需在其中创建一些父元素(或使用现有的元素)，并使用iframe大小的宽度和高度加上溢出，然后使用
$('#myparent').scroll(function () {而不是针对文档。请注意，当JS执行这一行时，#myparent将存在，所以请考虑使用.ready或将JS放在页面底部。
最后，如果您希望解决方案没有滚动，您可以尝试类似这里的帖子或这个也许更像它的一些css专用解决方案(这是一种完全不同的解决方案)。但不确定iframe也不会在那里引发问题。
编辑:，因为完整的css是不允许的，这里还有两个工作--我可以想到。
1-鼠标轮事件。
在Chrome上，试着替换.scroll(.由.on(‘鼠轮’，.如果它有效，您可以将这个插件用于跨浏览器解决方案。
2-恶毒与肮脏
我的最后一颗子弹不是最好的。您可以检测到iframe页面上的滚动事件(例如，让iframe一直走到文档的底部，并检测iframe窗口的滚动)。在这里，您可以在iframe页面中完成您的工作，例如：
$('#myiframe').ready(function () {
$(window).scroll(function () {
var header = $(document).scrollTop();
var headerHeight = $('#myiframe').contents().find('.header-wrapper').height();
var sticky = $('#myiframe').contents().find('.sticky-header');
if (header > headerHeight) {
sticky.addClass('sticky');
sticky.fadeIn();
} else {
sticky.removeClass('sticky');
}
});
});我测试过了，如果你只是替换#myiframe，它就会起作用了。但是就像我说的，它没有那么干净(不知道你的团队会怎么想^^')。
Stack Overflow用户
发布于 2017-12-06 15:40:47
我的解决方案是:对整个页面使用包装器，您也可以使用body标记，放置以下css：
<style>
html,
body {
height: 100%;
}
body {
overflow-y: scroll;
}
</style>并在你的js中测试它：
<script>
$('body').on('scroll', function() {
// your code goes here...
console.log('scroll being made');
})
</script>https://stackoverflow.com/questions/47537061
复制相似问题
腾讯云开发者
