Question

我正在使用此模板并更改了内容以满足我的需要。我还处在学习jscript的早期阶段，所以想知道菜单项是如何制作和活跃的。当页面向下滚动？基本上我把页面拆开了，可以看到滚动是如何工作的，但菜单不会相对于页面上的位置发生变化。答案会很好，但是我很想学习，解释会更好。

的Ta。

CreativeTemplate

Answer 1

您需要学习使用开发人员工具（F12）

点击F12（Chrome浏览器），
点击来源
点击StartBootstrap-creative文件夹
点击JS文件夹
找到此脚本http://ironsummitmedia.github.io/startbootstrap-creative/js/creative.js

然后快速浏览一下：

// Highlight the top nav as scrolling occurs
$('body').scrollspy({
    target: '.navbar-fixed-top',
    offset: 51
})

// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
    $('.navbar-toggle:visible').click();
});

// Fit Text Plugin for Main Header
$("h1").fitText(
    1.2, {
        minFontSize: '35px',
        maxFontSize: '65px'
    }
);

// Offset for Main Navigation
$('#mainNav').affix({
    offset: {
        top: 100
    }
})

你会立即看到它是.scrollspy()，.affix()和其他jQuery Bootstrap插件。

最终你使用Goog并找到http://getbootstrap.com/javascript/#scrollspy

这样的链接

Answer 2

使用该页面，我实际上无法访问开发工具，它会抛出错误。

所以我用另一种方式做了，右键单击＆gt;查看页面源。

它位于“js / wow.min.js”脚本中，然而，我发现代码效率低下，我会这样做：

$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop()> 200 )
{$('target-element').do something}); });

这是笔：

http://codepen.io/damianocel/pen/RWodej

什么使菜单在滚动时处于活动状态？

2 个答案: