Shrink Issue

Resolved connor234
(@connor234)

7 years, 7 months ago

Hi there,

I’ve just set up a Header with a shrink effect and would like to define exactly the point in which the shrink takes place, is there any ways of doing this? See Image

Cheers

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Contributor

(@hinampaksh)

We have no setting for that, but it may be possible with some custom code. Can you try adding the JS below under Tools > Layout CSS/JS > JS on the header themer layout itself and see if it works for you? Just adjust the offset value accordingly. 🙂

(function($){
    
    $(function(){
        var win = $( window ),
            shrinkHeader = $('header[data-shrink]'),
            shrinkOffset = 500;
        
        if ( shrinkHeader.length ) {
            shrinkHeader.imagesLoaded( function() {
                win.on( 'scroll.fl-theme-builder-header-shrink', function() {
                    if ( ! shrinkHeader.hasClass( 'fl-theme-builder-header-shrink' ) ) {
                        shrinkHeader.data( 'original-height', shrinkHeader.outerHeight() + shrinkOffset );
                    }
                } ); 
            });
        }
    });
    
})(jQuery);

Ben

Thread Starter

connor234

(@connor234)

7 years, 7 months ago

Hi Ben,

Thanks a lot for getting back so soon. This JS does work in terms of making the shrink start later on, is there any way to make the shrink start quicker. I had tried using negatives in the shrinkOffset value, but I don’t think that works.

Cheers

Plugin Contributor

Ben Carlo

(@hinampaksh)

7 years, 7 months ago

Hey @connor234,

The script below should do it! You can play around with the original-height data. 🙂

(function($){
    
    $(function(){
        var win = $( window ),
            shrinkHeader = $('header[data-shrink]');
        
        if ( shrinkHeader.length ) {
            shrinkHeader.imagesLoaded( function() {
                win.on( 'scroll.fl-theme-builder-header-shrink', function() {
                    if ( ! shrinkHeader.hasClass( 'fl-theme-builder-header-shrink' ) ) {
                        shrinkHeader.data( 'original-height', 0 );
                    }
                } ); 
            });
        }
    });
    
})(jQuery);

Ben

Thread Starter

connor234

(@connor234)

7 years, 7 months ago

Hi Ben,

Thanks a lot for that, it did the trick.

Plugin Contributor

Ben Carlo

(@hinampaksh)

7 years, 7 months ago

Awesome! And no worries at all, @connor234. 🙂