\$(window).scroll doesn't work for widgets?

[stryker129]

Hi guys,

As per our requirements I need to do sticky header for this div:

<div id="header-2">
               some content of sticky header
       </div>
<div id="container">
         some big-big text here
</div>

Client script:

$(window).scroll(function () {
       if( $(window).scrollTop() > $('#header-2').offset().top && !($('#header-2').hasClass('posi'))){
           $('#header-2').addClass('posi');
       } else if ($(window).scrollTop() == 0){
           $('#header-2').removeClass('posi');
       }
});

and css:

#header-2{
       background: #eeeeff;
       width: 100%;
       height: 50px;
}
#container{ 
       margin-top: 50px;
}
.posi{
       position:fixed;
         margin-top: 0;
       top:0;
}

I've got it from this example:

javascript - Sticky header after some scrolling? - Stack Overflow

But it doesn't work: scroll event didn't fire.

Thoughts?

[chirag_bagdai]

Hi jued0001

Thanks for making me understand about this issue

Move to header functionality works for only container not for columns.

So here is the solution which I tried, add below CSS to your custom widget

.stuck {
       position: fixed;
       display: inline-block;
       overflow-y: auto;
}

and add "stuck" class to custom widget HTML div.

-Check this if it helps..

[Shane J]

Can you give more detail for this:

"and add "stuck" class to custom widget HTML div."

I tried the following but it's not scrolling/sticking:

I'm still learning this kind of stuff.

EDIT:   I moved the </div> to the outside of everything else and that did make it stick.   It looks weird though because it sticks right where it is - in the middle of the screen.   Is there a way to make it stick to the top of the screen (or the bottom of the widget above it)?

After scrolling:

[Shane J]

I wanted to drop one more post in here which makes this work as I wanted it to, after borrowing what was setup for Order Guides for us by a vendor.

In your widget, add the following -

Link Function

function(){

setTimeout(function(){

$(function() {

var $sidebar     = $(".submit-panel"),

$window       = $(window),

$body           = $('section.page'),

offset         = $sidebar.offset(),

topPadding = 15;

$body.scroll(function() {

if ($body.scrollTop() > 20) {

$sidebar.stop().animate({

marginTop: $body.scrollTop()

});

} else {

$sidebar.stop().animate({

marginTop: 0

});

}

});

});

},50);

}

CSS

.submit-panel {

}

HTML Template

Add this to the top and a matching </div> at the bottom

<div class="submit-panel">

stuff presented in your widget

</div>

[JC Icaro1]

In case this helps someone, another option is to use [position: sticky].

See below example.

https://codepen.io/nyctophiliac/pen/xpmpyp