Window.scroll within an iframe

Question

I searched, but couldn't find anything.

I have a sticky header that shows up on the page after scrolling down on the page. This was working wonderfully on the page. However, I now have to unfortunately have to put it within an iframe.

I have to same exact code, but I believe it's the window.scroll that is causing it to trip up. The content is just sitting at the top of the page behind everything and when inspecting the code it stops at that function and goes no further.

Is there an alternative to window.scroll (or scroll function) or is there a way to make it work within an iframe? All my attempts have failed.

My example is here https://www.bootply.com/edHiY15iJy#

My HTML for the 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>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>

and my 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');
            }
        });
    }

A screenshot of what the menu looks like when it's not working:

Answer 1

I would have commented, but I haven't gotten enough reputation, yet. (Sorry) I found this on SO. Since you are trying to detect the scroll event inside the iframe, skyline's answer should be helpful.

Answer 2

The question here is where the scroll apply.

If the scroll apply on the document, the JS is in this document, and the iframe have the scroll, then it should work just like the jQuery doc : see the last demo here.

Maybe try to replace the iframe's content with the demo to see if it work.

A straight possible solution is to get the scroll back in the page, to do that just create some parent element in it (or use an existing one), with a width and height of the size of the iframe plus the overflow, and use a

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

instead of targeting the document. Beware that you'll need for #myparent to exist when the JS will execute this line, so think of using a .ready or putting the JS at the bottom of the page.

At last, if you want solution without scroll, you could try for something like this post here or this one maybe more like it for some css-only solutions (quite a different way of going around it). But it's not certain that the iframe won't cause issues there too.

Edit : since the full css is a no-go, here's two others work-around i can think of.

1- The mousewheel event.

On Chrome, try to replace the .scroll(... by .on('mousewheel',... If it work, you can use this plugin here for a cross browser solution.

2- The Bad and Dirty

Well, my last bullet isn't the nicest. You can detect the scroll event on the iframe page (make the iframe go all the way to the bottom of your document, and detect the scroll of the iframe's window for example). From here, you can then do your work in the iframe page, for example :

$('#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');
        }
  });
});

I tested it, it should work if you juste replace #myiframe. But as i said, it's not that clean (not sure what your team will think of it ^^').

Answer 3

my solution is: use a wrapper to the whole page, you can use body tag too, put the following css:

<style>
 html,
 body {
   height: 100%;
 }
 body {
   overflow-y: scroll;
 }
</style>

and test it in your js:

<script>
  $('body').on('scroll', function() {
  // your code goes here...
  console.log('scroll being made');
  })
</script>

Answer 4

Check the code rendered in your example (https://www.bootply.com/edHiY15iJy#) it's in "iFrame". I think what you are missing is the "css code" in your inner iframe code.

Answer 5

Try this code to get scroll offset inside iframe:

$(document).ready(function()
{   

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

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


    });


});

Answer 6

I ripped you bootply, loaded all the libraries in order to work and added it in an iframe and it works fine. Try it just to make sure that it is the script that is causing the error and not the page where the iframe is loaded.