Web Stuff

I wanted to expand on yesterday’s post about creating “sticky” elements with jQuery and CSS. I want to emphasize that 90% of the time the method outlined in the linked tutorial is the best way to go - e.g. using jQuery to give an element a ‘sticky’ class, and then CSS to apply a fixed position to the .sticky element.

However, sometimes this might not work for you. So it was yesterday for me, as I soon realized that the fixed position element would not behave as I wanted it to when I scrolled left and right (my canvas was wider than the screen size). Note: I realize that my expectations were incorrect, and that the behavior was exactly what it should be.

And so I had to devise a new solution. What I came up with was to add the .sticky class in the same way as before, but to position .sticky absolutely. I then used the jQuery .scrollTop() method to change the top position of .sticky as you scrolled up or down the page, thus replicating the position:fixed; functionality.

var top = $('div.targetElement').offset().top;
$(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();
    // whether that’s below the form
    if (y >= top) {
        // if so, add the fixed class and top positioning
        $table.addClass(‘sticky’);
        $thead.css(‘top’, (y - top - 48));
    } else {
        // otherwise remove them
        $table.removeClass(‘sticky’);
        $thead.css(‘top’, ‘auto’);
    }
});

While this provided a working solution, when I tested it on chrome it was almost unusable. Specifically any scrolling was extremely slow and jerky. Again, this was to be expected, when you consider the number of DOM requests that would be firing as you scroll down the document. Props though to Firefox though which was seemingly unaffected (anybody know why?) and worked great!

The solution to this was to set a timer on the scroll event, which would immediately limit the number of requests to a manageable amount. The only small downside was a delay in the element positioning on each scroll event, but this was kept very short at 250 milliseconds. The result was a page that scrolled smoothly, and a fixed position element done without css.

var scrollTimer = null;
$(window).scroll(function (event) {
    if (scrollTimer) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(handleScroll, 250);
});

var top = $('div.targetElement').offset().top;
function handleScroll() {
    scrollTimer = null;
    // what the y position of the scroll is
    var y = $(this).scrollTop();
    // whether that’s below the form
    if (y >= top) {
        // if so, ad the fixed class
        $table.addClass(‘sticky’);
        $thead.css(‘top’, (y - top - 48));
    } else {
        // otherwise remove it
        $table.removeClass(‘sticky’);
        $thead.css(‘top’, ‘auto’);
    }
}

It is often necessary to use a twig expressions as html class names. For example, if you wanted to style a list of items according to their category. However, sometimes those category names are not suitable for use as a class name as they might be capitalized and/or have spaces (e.g. if your category is ‘Healthy Living’).

Luckily twig has filters that you can use as a workaround, namely replace and lower. In the example below, we replace all spaces with hyphens (-), and make the output lowercase:

{{ category.name|replace(' ', '-')|lower }}