mercredi 1 juillet 2015

Trigger events when pageYoffset >= div.offsetTop

I am working on a simple navigation for my site which uses the window.pageYoffset to change the label on the only navigation button which is fixed to the document right, and secondly, click actions on the button scrolls to the top position of the respective container based on the label.

Note:

  1. Container A is dynamic, the height varies based on the height of the images received.
  2. Container B has fixed height, I've not decided on what the height is going to be but to just get this functionality going I've am considering 700px.

How do I calculate pageYoffset, such that label change is triggered only when the pageYoffset >= containerB.offset.top? I'm not sure if this condition is met and I am changing a wild goose or is there a better way to tackle this problem.

Current Solution

This is my current solution but the label change triggers when the scrollbar is not even close to the topPosition of ContainerB. I've attached a image which depicts the page.

window.addEventListener( "optimizedScroll", function optimizedScrollFunc( ) {
    var self = voApp,
        gotoTop = document.getElementById( "cc-gototop-js" ),
        winPageYOffset = window.pageYOffset,
        windowInnerHeight = window.innerHeight,
        documentScrollHeight = document.body.scrollHeight,
        topStoriesLoadMore = document.getElementById( "cc-tsLoadMoreWrapper-js" );
        dom.glanceUIDiv = document.getElementById( "cc-glanceWrapper-js" ).offsetTop;

    console.log((winPageYOffset + windowInnerHeight), documentScrollHeight);

    if ( winPageYOffset + windowInnerHeight >= documentScrollHeight ) {
        console.log("FIRED");
        $( gotoTop )
            .removeClass( "cc-thisWeek" )
            .addClass( "cc-today" );
        $( topStoriesLoadMore )
            .removeClass( "cc-tsLoadMoreWrapperVisible" );
    }
    if ( winPageYOffset < 200 ) {
        $( gotoTop )
            .removeClass( "cc-today" )
            .addClass( "cc-thisWeek" );
    }
} );
appUtil.f_throttle( "scroll", "optimizedScroll" );

Page Wireframe

enter image description here

Aucun commentaire:

Enregistrer un commentaire