Question

我搜索过，但找不到任何东西。

在页面上向下滚动后，我有一个粘贴的标题显示在页面上。这在页面上非常有效。但是，我现在不得不把它放在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');
            }
        });
    }

菜单无法正常工作时的截图：

Answer 1

我会评论，但我还没有获得足够的声誉。（抱歉）我在SO上找到了this。由于您试图检测iframe中的滚动事件，因此天际线的答案应该会有所帮助。

Answer 2

这里的问题是滚动适用的地方。

如果滚动应用于文档，JS在此文档中，并且iframe具有滚动，那么它应该像jQuery doc一样工作：see the last demo here。

也许尝试用demo替换iframe的内容，看它是否有效。

一个直接的解决方案是在页面中回滚，为此只需在其中创建一些父元素（或使用现有的元素），iframe的大小和溢出的宽度和高度，并使用

$('#myparent').scroll(function () {

而不是定位文档。请注意，当JS执行此行时，您需要存在#myparent，因此请考虑使用.ready或将JS放在页面底部。

最后，如果你想要没有滚动的解决方案，你可以尝试使用this post here或this one maybe more like it之类的东西来解决一些仅限css的解决方案（完全不同的解决方法）。但是不确定iframe也不会引起问题。

编辑，因为完整的css是禁止的，所以我可以想到其他两个解决方法。

1-鼠标滚轮事件。

在Chrome上，尝试替换.scroll（... by .on（'mousewheel'，... 如果可行，您可以使用this plugin here作为跨浏览器解决方案。

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它应该工作。但正如我所说，它不是那么干净（不确定你的团队会想到它^^'）。

Answer 3

我的解决方案是：使用整个页面的包装器，你也可以使用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>

Answer 4

检查您的示例（https://www.bootply.com/edHiY15iJy#）中呈现的代码是否在“iFrame”中。我认为你缺少的是内部iframe代码中的“css代码”。

Answer 5

尝试使用此代码在iframe中获取滚动偏移量：

$(document).ready(function()
{   

    $('#yourFrameId').load(function()
    {

        var iframe = $(this).get(0);
        iframe.contentWindow.onscroll = function(evt)
        {
            console.log(evt.pageY);
        };


    });


});

Answer 6

我扯了你的bootply，加载了所有库以便工作并将它添加到iframe中它运行正常。尝试它只是为了确保它是导致错误的脚本而不是加载iframe的页面。

在iframe中的Window.scroll

6 个答案: