[NicholasParticipant]

Hi X Team,

I’ve got a fixed footer that scrolls both independently and with the page. I’d like to STOP it from scrolling past the footer.

Also, how would I go about only displaying Parent menu items in the sidebar (as opposed to how it’s currently displaying child links)?

http://retrofit.agency/actaphase-60-2-col/

Login credentials to follow.

Thanks!

[NicholasParticipant]

This reply has been marked as private.

[JadeModerator]

Hi Nicholas,

I have tried the details you have provided but they seem to be incorrect. Would you mind double checking? Thank you.

[NicholasParticipant]

This reply has been marked as private.

[NicoModerator]

Hi There,

Regretfully, upon checking your setup, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks

[NicholasParticipant]

The sidebar is fixed (which I want). However, it should stop ABOVE the footer (and should not cover the footer or slide underneath it depending on Z-Index. It want it to stay relative at that footer’s border.

[NicholasParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for updating. You have made the sidebar fixed so it should be fixed NOT static at any point and of course it should be over the footer. So it’s working as expected as you set your code. I am not really sure what you are expecting here. If you want to show the footer above this then you can set higher z-index value for the footer.

Hope this makes sense.

[NicholasParticipant]

I’m not satisfied with my code– that’s why I’m posting in this forum.

I would like the sidebar to be fixed but I want to prevent it from going above or below the footer. Whether that means a full/fixed height or a sidebar like Facebook has implemented for its chat window.

Can you please provide a better solution?

[NicholasParticipant]

As a last resort I’ll make the height 700px, but that’s not ideal.

Also, if you could suggest a way to only display parent links in the sidebar (without child links), it would be much appreciated.

[LelyModerator]

Hi Nicholas,

Did you change the layout? Upon checking it is not fixed anymore. See this:http://screencast-o-matic.com/watch/cDen0b1X80
You have also added the following CSS which makes the sidebar move downward:

.x-main {
    width: 88%;
}

Please clarify how we can help you, since you have updated the structure.

Always,
X

[NicholasParticipant]

Hi,

It’s actually still fixed (see screenshot); my feeble mobile-responsive attempt was to set the responsive breakpoint at 1750px in the Custom CSS (as to avoid mangling the content on the right). Is there a better way to make it responsive?

The issue still remains; if the sidebar is full height and I scroll to the bottom of the page, the sidebar will either hide below the footer (with a smaller Z-index) or higher (with a larger Z-index). I don’t want this. I want the sidebar to stop at it’s bottom border, ABOVE the footer. There has to be a way to do it with Javascript if there’s no pure CSS solution.

[NicholasParticipant]

I just set it to static at 1750px, but if you have a more elegant solution it would be much appreciated.

@media screen and (min-width:1750px) {
.x-sidebar.right {
position: static;
width: 350px;
overflow-y: scroll;
top: 0;
bottom: 0;
right: 0px;
margin-top: 9%;
z-index: 1;
}
}

[ZeshanMember]

Hi Nicholas,

You can perhaps add padding left equals the width as your fixed sidebar to your footer and it will automatically reduce the footer width based on screen size (see: http://prntscr.com/aajmri). CSS code:

@media only screen and (min-width: 1250px) {
  .x-colophon.bottom {
    padding-right: 350px;
  }
}

Note that as this is a custom development, we cannot offer a perfect solution here as custom development is outside the scope of our support. If you need in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[NicholasParticipant]

Hm, thanks for the reply:

What do I need to do to get this jQuery snippit working– do I need to wrap it in jQuery(document).ready(function($) {
or something?

$(function() {
    $.fn.scrollBottom = function() {
        return $(document).height() - this.scrollTop() - this.height();
    };

    var $el = $('.x-sidebar right>div');
    var $window = $(window);

    $window.bind("scroll resize", function() {
        var gap = $window.height() - $el.height() - 10;
        var visibleFoot = 172 - $window.scrollBottom();
        var scrollTop = $window.scrollTop()

        if(scrollTop < 172 + 10){
            $el.css({
                top: (172 - scrollTop) + "px",
                bottom: "auto"
            });
        }else if (visibleFoot > gap) {
            $el.css({
                top: "auto",
                bottom: visibleFoot + "px"
            });
        } else {
            $el.css({
                top: 0,
                bottom: "auto"
            });
        }
    });
});

[Author]

Posts