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

Question

下午好，

我整个下午都在试图找出我的代码的问题。有趣的是，当我将代码放在代码笔上时，它工作得很好。在我的电脑上，它没有。 发生的情况是，当我向下滚动页面时，我制作了一个jquery代码来向我的元素添加"淡入"的效果。然后，在我的工作过程中，我决定要使用 bootstrap，然后我像这样将其包含在 head 部分中：

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

但是，每当我包含引导程序文件时，我的 javascript 淡入淡出函数就会停止正常工作。太奇怪了。最奇怪的部分是，当我转移到代码笔时，它工作正常。

这是我的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 之后加载引导程序，而不是在结束正文标记之前的标题。也许是加载顺序问题？