Semantic-ui: Sidebar + Sticky menu on same page

[tecoad]

Hi there,

I'm trying to use a sidebar and a sticky menu on the same page.
However, when scrolling down and clicking to view sidebar, the menu detaches from the top when sidebar is visible.
The behavior I would expect in this case would be the menu to slide with the content when sidebar is visible, as it does when using a fixed top menu.

Is it possible? Am i doing it right?
Check fiddles:

Sticky menu + Sidebar: http://jsfiddle.net/tecoad/g2sy72mf/6/
Fixed top menu + Sidebar (expected behavior): http://jsfiddle.net/tecoad/g2sy72mf/5/

[ns-phennessy]

Everything you want to be "pushed" must be inside the pusher div.

http://jsfiddle.net/438s86on/

Works as expected.

Also with the sticky stuff, you should specify a context

[tecoad]

@ph7vc
no. the example you provided works exactly as mine. note that after scrolling, menu doesn't slide with the content when sidebar is visible.
how it is:

how it should be:

[ns-phennessy]

Here is what I see. Looks fine to me

[tecoad]

@ph7vc
This is freakin odd. This is how the same page appears to me on Chrome, Safari & Firefox for Mac:

[jlukic]

Sidebars are a pain for maintaining coordinate systems. I discuss this in the release notes, and in some other threads. The spec is ambiguous about how to handle translate and positioning.

The only transition that does not _break_ position fixed, is overlay which does not modify the coordinate system of pusher.

Push etc will all run into issues with fixed content that is not static fixed content and outside of pusher.

You can see an example of this with sticky here:
http://jsfiddle.net/k8nsy6xb/

[lauri-elevant]

Just for your information, I managed to solve my issues with Sidebar + Sticky by just moving the sticky element out of the pushed tree, directly to document.body. Being placed there, sticky starts working nicely. Note that 260px is the width for my sidebar, YMMV.

$('.following.menu').sticky({
    onStick: function() {
        if ($(this).parents('.pushed').length) {
            $(this).data('displaced', $(this).parent());
            $(this).detach().appendTo(document.body).css('left', '-=260px');
        }
    },
    onUnstick: function() {
        if ($(this).data('displaced')) {
            $(this).detach().appendTo($(this).data('displaced')).data('displaced', null);
        }
    }
});

You probably also need to attach something like that to the sidebar code:

    onShow: function() {
        $('.following.menu').each(function() { $(this).data('moduleSticky').refresh(); });
    },
    onHidden: function() {
        $('.following.menu').each(function() { $(this).data('moduleSticky').refresh(); });
    }

@jlukic Could the sticky be moved out to body by default? I do not see any problems with this approach - the sticky (especially while being "stuck") is absolutely positioned anyway..

If you approve, I can put in some time for a PR.

[jlukic]

This is a sore spot in the css spec, translate3d adds the unexpected consequence of causing a new stacking context w/r/t position: fixed. I've played this issue out in the Chromium bug tracker before, but it needs to be resolved on a w3c spec level.

You should also be able to just do

        onShow: function() {
            $('.following.menu').sticky('refresh');
        },
        onHidden: function() {
            $('.following.menu').sticky('refresh');
        }

[lauri-elevant]

@jlukic

Fully aware of the spec situation. This is why I propose simply bypassing all of that and putting the (already abs. positioned) element outside of the translate3d-affected DOM tree. Do you see any downsides? Maybe make a separate option, like in popups code?

It fixed my issues, anyway. Just wanted to check if you think it is worth coding this approach to SUI directly. Since I did not have to resort to hacking SUI, it is not an issue for me any more, but I can put in some time if it would align with your plans.

Thanks for the syntax pointer! :-) I was getting too comfortable working with the internal stuff ;)

And keep up the awesome work! :+1: :+1: :+1:

[jlukic]

I'm not sure the exact consequences of this, but I would believe there would be some issues depending on the layout structure. I'll open a separate issue. #2774

[andrew-oko-odion]

Any Fix for this yet?
I am using React Semantic-ui and its a major problem

[andrew-oko-odion]

Just for your information, I managed to solve my issues with Sidebar + Sticky by just moving the sticky element out of the pushed tree, directly to document.body. Being placed there, sticky starts working nicely. Note that 260px is the width for my sidebar, YMMV.

$('.following.menu').sticky({
    onStick: function() {
        if ($(this).parents('.pushed').length) {
            $(this).data('displaced', $(this).parent());
            $(this).detach().appendTo(document.body).css('left', '-=260px');
        }
    },
    onUnstick: function() {
        if ($(this).data('displaced')) {
            $(this).detach().appendTo($(this).data('displaced')).data('displaced', null);
        }
    }
});

You probably also need to attach something like that to the sidebar code:

    onShow: function() {
        $('.following.menu').each(function() { $(this).data('moduleSticky').refresh(); });
    },
    onHidden: function() {
        $('.following.menu').each(function() { $(this).data('moduleSticky').refresh(); });
    }

@jlukic Could the sticky be moved out to body by default? I do not see any problems with this approach - the sticky (especially while being "stuck") is absolutely positioned anyway..

If you approve, I can put in some time for a PR.
@lauri-elevant I am trying to do the same, using semantic-ui-react and its not working please can you show a example please?