Sidebar Sticky Issue

  • I am using the following jQuery code to make my sidebar sticky just like WordPress sticky plugin.

    <script>
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}

$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>

/****** CSS *******/
sticky.stick {
position: fixed;
top: 35px;
z-index: 1;
width: 306px;
margin: 0 auto;
margin-bottom: 0;
margin-left: 27px;
margin-right: auto;
padding: 25px 40px;
}

    Issue: I want it to stop scrolling when it gets to footer or bottom of the sample ESA letter page, but it starts overlapping with footer.
    I think I have to measure number of scrolls but don’t know how to implement it.
    Any examples?

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

  • Hello Julia,

    Is this the same site you are looking for help with? Also if you can provide us the screenshot it will help us understand the exact issue.

    The site shared doesn’t have a sidebar, so which is the area you are talking about.

    Can you please share that with us.

    Thanks.

    Thread Starter Julia Anderson

    (@julianderson671)

    Kartik I just checked and my sample page issue is resolved. However this issue is persisting in my blog pages. Please help me in sorting out this issue.

    Cheers
    Julia

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    How did you resolve the issue @julianderson671 ? We need to know why that resolution isn’t working for the other Blog pages. I have checked one of your blog pages and the issue doesn’t persist for me, can you try clearing your browser’s cache?

    Thread Starter Julia Anderson

    (@julianderson671)

    I asked my developers team to check out the issue as I am already stressed out with this irritating problem. They sorted out this issue buy correcting page coding and removed the sticky note but now they are unable to identify issue in blog pages. I need an expert advice so that I can get it fixed right away.

    Thanks
    Julia

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    We’re happy to help, but we need more steps outlining how to replicate the problem.

    Thread Starter Julia Anderson

    (@julianderson671)

    I am explaining that when you scroll down till the end of any blog page, a sticky note overlaps with the footer. This issue occurs on media query less than 1200 pixels. I am unable to share the screen shot here. Please scroll down in any of the blog pages till the end.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Got it. Your monitor must be of a certain height before you can see the issue.

    I don’t understand how this Sticky sidebar will ever work. Can you consider not using it? It’s going to suck a lot of development and resource time and for little impact.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Let me elaborate when I say:

    It’s going to suck a lot of development and resource time and for little impact.

    To build in logic that says “On scroll, track the position of the sidebar and the footer, check whether the bottom of the sidebar touches the footer, and then stop the JS that enabled the sticky sidebar” is quite a lot of work and it’s going to be a poorer experience for the user (because it will affect the browser’s performance).

    The Web just wasn’t meant to be used in that way. The issue was introduced by using a script and some CSS. You should reconsider this approach rather than adding more code until it works.

    Thread Starter Julia Anderson

    (@julianderson671)

    Thank you very much for your support Andrew and I will try out considering your valuable professional tips.

    Cheers!
    Julia

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Sidebar Sticky Issue’ is closed to new replies.

Tags