Author: sasa_wp

Scroll fixed header functions

// menu scroll
var lastScrollTop = 0;
var lastScrollChange = 0;
var scrollDown = true;
var topOffset = 100;
var lastScrollChangeOffset = 100;

$(window).scroll(function(event){
    checkScroll();
});
checkScroll();

function checkScroll(){
    var st = $(this).scrollTop();
    if(st < lastScrollTop){
        if(!scrollDown){
            lastScrollChange = st;
            scrollDown = true;
        }
    }else{
        if(scrollDown){
            lastScrollChange = st;
            scrollDown = false;
        }
    }
    if(st - lastScrollChange > lastScrollChangeOffset){
        lastScrollChange = st;
        if(!scrollDown){
            $("body").addClass("down");
        }else{
            $("body").removeClass("down");
        }
    }
    if(st > topOffset){
        $("body").addClass("scroll");
    }else{
        $("body").removeClass("scroll");
    }
    lastScrollTop = st;
}

Responsive Bootstrap gutter

HTML

<div class="row responsive-gutter">
    <div class="col-6 col-md-4">
    </div>
    <div class="col-6 col-md-4">
    </div>
    ...
</div>

CSS

.row.responsive-gutter {
    > .col,
    > [class*="col-"] {
        margin-bottom: $grid-gutter-width;
        &.last-row {
            margin-bottom: 0;
        }
    }
    // setting half the size for mobile
    @include media-breakpoint-down(md) {
        margin-right: -$grid-gutter-width / 4;
        margin-left: -$grid-gutter-width / 4;
        > .col,
        > [class*="col-"] {
            margin-bottom: $grid-gutter-width / 2;
            padding-right: $grid-gutter-width / 4;
            padding-left: $grid-gutter-width / 4;
        }
    }
}

Setting first-row, last-row, single-in-row classes

HTML

<div class="row first-last-row">
    <div class="col-6 col-md-4">
    </div>
    <div class="col-6 col-md-4">
    </div>
    ...
</div>

JavaScript

// first last row
function firstLastRow(){
    if($(".row.first-last-row").length){
        $(".row.first-last-row").each(function(){
            var col_items = new Array();
            var item_offset = false;
            var item_single = true;
            var items_length = $(this).find(">div").length;
            $(this).find(">div").each(function(index){
                $(this).removeClass("first-row");
                $(this).removeClass("last-row");
                $(this).removeClass("single-in-row");
                if(item_offset === false){
                    item_first_row_offset = $(this).offset().top;
                }else{
                    if(item_offset != $(this).offset().top){
                        if(item_single){
                            $(col_items[col_items.length - 1]).addClass("single-in-row");
                        }
                        item_single = true;
                    }else{
                        item_single = false;
                    }
                }
                if(index == items_length - 1 && item_offset != $(this).offset().top){
                    $(this).addClass("single-in-row");
                }
                item_offset = $(this).offset().top;
                col_items.push($(this));
            });
            if(item_offset !== false){
                item_last_row_offset = item_offset;
                item_offset = false;
                $(this).find(">div").each(function(e){
                    item_offset = $(this).offset().top;
                    if(item_offset == item_first_row_offset){
                        $(this).addClass("first-row");
                    }
                    if(item_offset == item_last_row_offset){
                        $(this).addClass("last-row");
                    }
                });
            }
        });
    }
}
firstLastRow();
$( window ).resize(function() {
    firstLastRow();
});

Bootstrap accordion scroll to opened item

$(".accordion .collapse").on('shown.bs.collapse', function(e){
    if($(".main-menu") != $(this)){
        // get clicked item
        $clickedElement = $($(e.target).data('bs.collapse')._triggerArray);
        clickedElementOffsetTop = $clickedElement.offset().top;
        // add additional offset for top fixed elements
        headerOffset = $(".main-header-top").outerHeight();
        // check if element is outside viewport
        if(clickedElementOffsetTop - headerOffset < $(window).scrollTop()){
            $('html, body').animate({
                scrollTop: clickedElementOffsetTop - headerOffset
            }, 300);
        }
    }
});