标题缩小滚动

时间:2018-11-10 02:03:52

标签: javascript header

尝试缩小类似于https://marketplace.atlassian.com/apps/1216050/invision-for-jira?hosting=cloud&tab=overview的滚动标题,

使用来自Squarespace的现有代码-标头div = header#topBar

找到了类似的代码,但无法弄清楚如何将其与Squarespace中的现有代码联系起来

'use strict';

function classReg(className) {
    return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

var hasClass, addClass, removeClass;

if ('classList' in document.documentElement) {
    hasClass = function (elem, c) {
        return elem.classList.contains(c);
    };
    addClass = function (elem, c) {
        elem.classList.add(c);
    };
    removeClass = function (elem, c) {
        elem.classList.remove(c);
    };
}
else {
    hasClass = function (elem, c) {
        return classReg(c).test(elem.className);
    };
    addClass = function (elem, c) {
        if (!hasClass(elem, c)) {
            elem.className = elem.className + ' ' + c;
        }
    };
    removeClass = function (elem, c) {
        elem.className = elem.className.replace(classReg(c), ' ');
    };
}

function toggleClass(elem, c) {
    var fn = hasClass(elem, c) ? removeClass : addClass;
    fn(elem, c);
}

var classie = {
    // full names
    hasClass: hasClass,
    addClass: addClass,
    removeClass: removeClass,
    toggleClass: toggleClass,
    // short names
    has: hasClass,
    add: addClass,
    remove: removeClass,
    toggle: toggleClass
};

// transport
if (typeof define === 'function' && define.amd) {
    // AMD
    define(classie);
} else {
    // browser global
    window.classie = classie;
}

})
( window );

$('.collapse').on('click', function (e) {
    e.preventDefault();
    $(this).toggleClass('active');
});


$(function () {
    var navbar = $('.navbar');
    $(window).scroll(function () {
        if ($(window).scrollTop() <= 40) {
            navbar.css('box-shadow', 'none');
        } else {
            navbar.css('box-shadow', '0px 10px 20px rgba(0, 0, 0, 0.4)');
        }
    });
})

$(function () {

    var stickyElement = '.panel-affix',
        bottomElement = '#fake-footer';

    if ($(stickyElement).length) {
        $(stickyElement).each(function () {


            var fromTop = $(this).offset().top,
                fromBottom = $(document).height() - ($(this).offset().top
                    + $(this).outerHeight()),

                stopOn = $(document).height() - ( $(bottomElement
                ).offset().top) + ($(this).outerHeight() - $(this).height());

            if ((fromBottom - stopOn) > 200) {
                $(this).css('width', $(this).width()).css('top',
                    0).css('position', '');
                $(this).affix({
                    offset: {
                        top: fromTop - 80,
                        bottom: stopOn
                    }

                }).on('affix.bs.affix', function () {
                    $(this).css('top',
                        '80px').css('position', '');
                });
            }
            $(window).trigger('scroll');
        });
    }

});

$('body').scrollspy({
    offset: 80
});

$(function () {
    $('a[href*=#]:not([href=#])').click(function () {
        if (location.pathname.replace(/^\//, '') ==
            this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1)
                + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

不确定是否如何合并来自Squarespace的现有代码以使javascript运行

0 个答案:

没有答案