2017-05-22 65 views
0

大家下午好,为什么我的JavaScript包含Bootstrap时不能正常工作?

我一直在整个下午试图弄清楚我的代码有问题。有趣的是,当我将代码放在codepen上时,它工作得很好。在我的电脑上,它没有。 发生了什么是我做了一个jQuery代码,当我向下滚动页面时,向我的元素添加“淡入”效果。然后,在我的工作中,我决定,我想用引导,然后我把它的头一节是这样的:

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

但是,每当我有引导文件,我的JavaScript衰减功能停止工作正常。它是如此WEIRD。最奇怪的部分是,当我转移到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; 
     }); 


}); 

没有人有线索?

+1

我想你是与保留字bootstrap使用冲突。尝试例如在类的末尾添加'2'并查看它是否有效。 –

回答

0

尝试在你的html页面的结尾处加载引导后的jquery,而不是在关闭body标记之前的标题。也许这是一个加载顺序问题?

相关问题