How Do I Create A Sidebar Like This Website?

Hi I was browsing through some websites and I came across this website with this sidebar in the main content page.

http://skincare.com-mb.com/en/102/#b

See in this website there’s a sticky sidebar as shown below

How would I create this?

Thanks

that’s probably a image as a background inside a div. try finding a picture similar and scale it as the background

Do you mean that you want make it stick on scroll?

yes if you took a look at the website I included you can see that when you scroll down the sidebar stays there.

But the main issue is actually creating that sidebar in the first place.

I’m a bit confused wether I should layout a page with 1 section with a container and 1 column or what not to create that side bar.

They define a bootstrap grid with 7 columns.

The remaining 5 columns are not defined
and @artistro08 is correct… it’s a div with an encased images.

Here’s the background image if you want to play with it some more:

http://skincare.com-mb.com/en/102/img/bg-sidebar-right.jpg

This is the magazine cover image:

http://skincare.com-mb.com/en/102/img/wd_may_cover.jpg

And this is what makes it stick.

(function($) {
    var defaults = {
            topSpacing: 0,
            bottomSpacing: 0,
            className: 'is-sticky',
            wrapperClassName: 'sticky-wrapper',
            center: false,
            getWidthFrom: ''
        },
        $window = $(window),
        $document = $(document),
        sticked = [],
        windowHeight = $window.height(),
        scroller = function() {
            var scrollTop = $window.scrollTop(),
                documentHeight = $document.height(),
                dwh = documentHeight - windowHeight,
                extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
            for (var i = 0; i < sticked.length; i++) {
                var s = sticked[i],
                    elementTop = s.stickyWrapper.offset().top,
                    etse = elementTop - s.topSpacing - extra;
                if (scrollTop <= etse) {
                    if (s.currentTop !== null) {
                        s.stickyElement.css('position', '').css('top', '');
                        s.stickyElement.parent().removeClass(s.className);
                        s.currentTop = null
                    }
                } else {
                    var newTop = documentHeight - s.stickyElement.outerHeight() - s.topSpacing - s.bottomSpacing - scrollTop - extra;
                    if (newTop < 0) {
                        newTop = newTop + s.topSpacing
                    } else {
                        newTop = s.topSpacing
                    }
                    if (s.currentTop != newTop) {
                        s.stickyElement.css('position', 'fixed').css('top', newTop);
                        if (typeof s.getWidthFrom !== 'undefined') {
                            s.stickyElement.css('width', $(s.getWidthFrom).width())
                        }
                        s.stickyElement.parent().addClass(s.className);
                        s.currentTop = newTop
                    }
                }
            }
        },
        resizer = function() {
            windowHeight = $window.height()
        },
        methods = {
            init: function(options) {
                var o = $.extend(defaults, options);
                return this.each(function() {
                    var stickyElement = $(this);
                    var stickyId = stickyElement.attr('id');
                    var wrapper = $('<div></div>').attr('id', stickyId + '-sticky-wrapper').addClass(o.wrapperClassName);
                    stickyElement.wrapAll(wrapper);
                    if (o.center) {
                        stickyElement.parent().css({
                            width: stickyElement.outerWidth(),
                            marginLeft: "auto",
                            marginRight: "auto"
                        })
                    }
                    if (stickyElement.css("float") == "right") {
                        stickyElement.css({
                            "float": "none"
                        }).parent().css({
                            "float": "right"
                        })
                    }
                    var stickyWrapper = stickyElement.parent();
                    stickyWrapper.css('height', stickyElement.outerHeight());
                    sticked.push({
                        topSpacing: o.topSpacing,
                        bottomSpacing: o.bottomSpacing,
                        stickyElement: stickyElement,
                        currentTop: null,
                        stickyWrapper: stickyWrapper,
                        className: o.className,
                        getWidthFrom: o.getWidthFrom
                    })
                })
            },
            update: scroller
        };
    if (window.addEventListener) {
        window.addEventListener('scroll', scroller, false);
        window.addEventListener('resize', resizer, false)
    } else if (window.attachEvent) {
        window.attachEvent('onscroll', scroller);
        window.attachEvent('onresize', resizer)
    }
    $.fn.sticky = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1))
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments)
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.sticky')
        }
    };
    $(function() {
        setTimeout(scroller, 0)
    })
})(jQuery);

You could actually insert this into the custom code section.

It may be missing another library… I haven’t had time to check.

2 Likes

I thought you could create this stick without custom code? I thought you could create something like this all in Webflow? Maybe I am wrong.

It is absolutely possible without custom code. :slight_smile: Same technique like with sticky navigation.

you can make it stick with Webflow… but if you notice
the image is not pinned to the top when the page first loads.

It sticks after the header title goes off screen… “70 year Old Grandmas Look 50 Again…”

and unsticks when the header title reappears.

This means there js being used to control the div.

Hence… the js code I provided above. Code goes in the custom code section.

@Revolution
I thought there was a way to even do that as well in Webflow?

@sabanna, am I wrong?

Here is example

http://arthurplayground.webflow.io/sticky-elements

@Arthur already did that :slight_smile:

1 Like

aha! I knew it. I knew I previewed this somewhere.

Thanks for sharing @sabanna

I don’t think that’s custom code. He pinned the div @ 25vh.

I would have to test it further… but I believe the
current div position is not based on what’s above the div.

Thanks @sabanna :wink: @Revolution I have a tutorial for that effect coming but it is made entirely in webflow I assure you. Webflow is a really powerful tool (as @sabanna proved here) and though you can’t do everything you can in js it’s really worth taking a moment to think about if you can build it in webflow instead of rushing into a hundred lines of js :smile: @seank you can clone that here: Playground - Webflow :smile:

Hope it helps :smile:

Arthur

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.