在新安装的Foundation 6 Zurb堆栈上,安装构建基sticky-shrinknav并将其注入到使用{{> sticky-shrinknav}}的index.html模板中会在页面上显示该组件,但滚动页面不会产生预期的效果结果。
尝试在不同位置多次安装Zurb堆栈。产生相同的结果。
这是index.html模板:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Veridata</title>
<link rel="stylesheet" href="{{root}}assets/css/app.css">
</head>
<body>
{{> sticky-shrinknav}}
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
{{> body}}
<script src="{{root}}assets/js/app.js"></script>
</body>
</html>
我的app.scss文件包含:
@import 'components/building-blocks/sticky-shrinknav';
和我的config.yml包含:
# Paths to JavaScript entry points for webpack to bundle modules
entries:
- "src/assets/js/building-blocks/sticky-shrinknav.js"
- "src/assets/js/app.js"
期望与此页面上显示的内容相同: https://foundation.zurb.com/building-blocks/blocks/sticky-shrinknav.html
相反,导航栏是静态的(不会收缩或移动),滚动时某些页面组件位于导航栏上方,而其他页面组件在滚动时位于导航栏下方。 我很抱歉,如果这是一个菜鸟问题。我是Foundation的新手。
编辑:这是app.js文件的内容:
import $ from 'jquery';
import 'what-input';
// Foundation JS relies on a global varaible. In ES6, all imports are hoisted
// to the top of the file so if we used`import` to import Foundation,
// it would execute earlier than we have assigned the global variable.
// This is why we have to use CommonJS require() here since it doesn't
// have the hoisting behavior.
window.jQuery = $;
require('foundation-sites');
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
//import './lib/foundation-explicit-pieces';
$(document).foundation();
答案 0 :(得分:1)
您必须在app.js中导入sticky-shrinknav组件(如果您希望将其捆绑在其中)。否则,您还必须在HTML文件中包含生成的包。
但是通常,您需要const $ = require('jquery')
或import $ from 'jquery'
作为sticky-shrinknav文件的第一行才能为其加载jQuery。