Question

下午好，

我整个下午都试图弄清楚我的代码有问题。有趣的是，当我把我的代码放在codepen上时它运行得很好。在我的电脑上，它没有。当我向下滚动页面时，我发了一个jquery代码来为我的元素添加“淡入”效果。然后，在我工作的中间，我决定使用bootstrap然后将其包含在头部中，如下所示：

<link rel="stylesheet" type="text/css" href="bootstrap-3.3-1.7-dist/css/bootstrap.min.css">.

但是，每当我包含引导文件时，我的javascript淡入功能都会停止正常工作。这太过分了。最奇怪的部分是，当我转移到codepen时它工作正常。

这是我的javascript代码：

$(document).ready(function(){

         $('.hideme').each(function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            console.log($(this).position().top);


            // If the object is completely visible in the window, fade it it 
            if(bottom_of_window > $(this).position().top){

                $(this).animate({'opacity':'1'},1000);
             }


        }); 

    });



    //Click event to scroll to top
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},'slow');
        return false;
    });

    $("#who").click(function() {
        $('html,body').animate({
        scrollTop: $(".about").offset().top}, 'slow');
        return true;
        });

    $("#projects").click(function() {
        $('html,body').animate({
        scrollTop: $("#projectsResponse").offset().top}, 'slow');
        return true;
        });

    $("#vision").click(function() {
        $('html,body').animate({
        scrollTop: $("#qualities").offset().top}, 'slow');
        return true;
        });

    $("#contact").click(function() {
        $('html,body').animate({
        scrollTop: $("#divisor_contato").offset().top}, 'slow');
        return true;
        });

    $("#contact2").click(function() {
        $('html,body').animate({
        scrollTop: $("#divisor_contato").offset().top}, 'slow');
        return true;
        });


});

有没有人有线索？

Answer 1

尝试在html页面末尾的jquery之后加载bootstrap，而不是在关闭body标记之前的标题。也许它是一个加载序列问题？

当我包含Bootstrap时，为什么我的javascript无法正常工作？

1 个答案: