爲什麼我的JavaScript包含Bootstrap時不能正常工作？

大家下午好，爲什麼我的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; 
     }); 


});

沒有人有線索？

來源

2017-05-22 Jeff Goes

我想你是與保留字bootstrap使用衝突。嘗試例如在類的末尾添加'2'並查看它是否有效。 –

嘗試在你的html頁面的結尾處加載引導後的jquery，而不是在關閉body標記之前的標題。也許這是一個加載順序問題？

來源

2017-05-23 00:00:55 Nick0989

爲什麼我的JavaScript包含Bootstrap時不能正常工作？

回答

相關問題