\$(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]

Hello,

I am not sure if you aware or not but you can use OOTB feature in ServicePortal for sticky header.

For example:

1. Open Page in Designer mode.

2. Click on "Container" and then click on "Pencil" icon for editing.

3. Select "Move to header" option.

4. Now you can use custom widget or HTML Widget.

[stryker129]

Hi Chirag.

I was not aware of this feature.

But this header hides once I scroll page to the bottom.

But I need to see it like in this example: Edit fiddle - JSFiddle

Thanks.

[chirag_bagdai]

Hi Ivan,

Same functionality is available in Service Portal.

Please make sure that you are not using any external javascript.

If you just make sure that the container is having "Move to header" check to true then it should work.

I would say test the same in personal (dev) instance.

[Shane J]

So how do you apply this in a way that actually functions like Ivan stated?   A Container goes the entire width of a page, so if you only want a widget on one side to move when everything else is scrolling, I don't see a way to do that.