TL; DR:Sticky实际上能够对我通过JavaScript提供的更改做出反应吗？如果是这样,怎么样？
(该项目使用的是Foundation 6.2和WordPress 4.4,主题使用Node.js/npm和gulp 4.0安装.我的问题详细地用粗体标记.)
我想nav使用Foundation的Sticky Plugin 使条形粘,但只有当我点击一个按钮时.这意味着当DOM全部完成时,nav条形图不应该"单独"粘贴,而是保持在文档中的顶部位置.此外,它应该在向下滚动时消失,但在向上滚动时会粘住.
该nav酒吧是正确包裹在所有需要的divS,所以nav酒吧是能够坚持."额外"部分出现问题.我的想法是首先使用PHP实例化Sticky:
<div data-sticky-container>
<header class="header" role="banner" id="sticky_header" data-sticky data-top-anchor="1"
data-btm-anchor="content:top" data-options="marginTop:0;" style="width:100%"
>
<?php get_template_part('parts/nav', 'offcanvas-topbar'); ?>
</header>
</div>
之后,data-btm-anchor使用在点击时触发的JavaScript 更改为当前滚动位置.这不像我想的那样好用.到目前为止我尝试过的:
getElementByID然后setAttribute,data-btm-anchorPHP文件确实根据Firebug改变,但这不会影响nav条形; 它保持原样.我是否需要"重新实施"Sticky,如果是,如何？使用JavaScript设置选项涉及将对象传递给构造函数,如下所示:
Run Code Online (Sandbox Code Playgroud)var options = { multiExpand: true, allowAllClosed: false }; var accordion = new Foundation.Accordion($('#some-accordion'), options);
这是否意味着我可以将新参数传递给现有的插件实例？每当我传递一个新Foundation.Sticky对象时,只有一个不同的 …
javascript wordpress jquery zurb-foundation zurb-foundation-6
我已经设置了一个新项目来使用Gulp和Sass测试Foundation 6,但它似乎根本没有编译.还有另一篇文章接近这个主题,但我个人认为接受的答案不是正确的解决方案 - 因为它包含了所有组件,实际上与Zurb建议的相反(参见此问题:https://github.com/zurb/foundation-sites/issues/7537).无论如何 ......
我从凉亭安装了Foundation 6.1.1,并添加了我的gulp-sass函数的路径,gulpfile.js如下所示:
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src('scss/theme.scss')
.pipe(sass({ includePaths : ['bower_components/foundation-sites/scss'], outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(gulp.dest('css/'))
});
我的theme.scss情况如下:
//vendor file
@import '../bower_components/foundation-sites/scss/settings/settings';
@import '../bower_components/foundation-sites/scss/foundation';
body{
background: red;
}
编译我的scss时我没有错误,但输出theme.css看起来像这样:
/**
* Foundation for Sites by ZURB
* Version 6.1.1
* foundation.zurb.com
* Licensed under MIT Open Source
*/
body {
background: red;
}
所以看起来它正在击中文件,因为评论输出但它没有编译任何Sass导入foundation.scss.
我对Foundation 6文件有一些问题,由于某些原因它们不包括所有sass组件.我尝试使用Foundation 5,它工作正常.
这是我的gulp任务:
gulp.task('styles', ['clearCss'], function() {
gulp.src('assets/sass/app.scss')
.pipe(plumber(plumberErrorHandler))
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'compressed'
})
.on('error', notify.onError(function(error) {
return "Error: " + error.message;
}))
)
.pipe(autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./assets/dist/css'))
.pipe(browserSync.stream({match: '**/*.css'}))
.pipe(notify({
message: "Styles task complete!"
}));
});
这是我的app.scss:
// Import Foundation
@import "../components/foundation/scss/foundation";
它适用于我自己的sass文件,但完全忽略了基础部分.
我已经安装了角度6与基础,但我得到一个错误与JQuery.
未捕获的语法错误:意外标识符ReferenceError:$未定义
在我的组件中,我有
declare var $:any
onNgInit () {
$(document).foundation()
}
我在angular.json中有所有导入
scripts : [
"node_modules/jquery/dist/jquery.js"
]
我已经尝试了我在互联网上找到的所有内容,但仍面临同样的错误.当我使用Angular 4时,还要添加这个用于工作
我已经下载了新的Zurb Foundation 6完整包(Foundation for Sites).存档文件包含以下文件和文件夹:
[css] > app.css, foundation.css, foundation.min.css
[img] > [empty folder]
[js] >
app.js
foundation.js
foundation.min.js
vendor > jquery.min.js, what-input.min.js
我在页脚中包含了JS文件,在标题中包含了CSS:
<!-- foundation library and initialization -->
<script src="/Foundation/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
Chrome中出错
我尝试使用REVEAL组件(它在Foundation 5中工作),但这次它抛出了一个错误:
Uncaught ReferenceError: We're sorry, 'reveal' is not an available method for i.
我查看了Foundation.min.js内部并且它已经显示了它.我下载完整的软件包,所以它应该可以工作,但事实并非如此.
应该触发模态的JS代码:
$('#submit-modal').foundation('reveal', 'open');
更新1:尝试新页面:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="/Foundation/css/foundation.min.css" rel="stylesheet" />
</head>
<body>
<div class="row">this is the body of the page</div>
<div …尝试创建一个始终坚持网站顶部的菜单.跟随zurb.foundation的文档,但.sticky的行为总是出乎意料的方式.或者也许我没有明显的一些？
请在这里查看重建:http: //codepen.io/mister-hansen/pen/wMgrPm
如果站点向下滚动,并且达到初始视口的精确高度,则粘滞插件会将元素.sticky从is-stuck is-at-top:更改为:.is-anchored .is-at-bottomso .sticky消失.
谢谢.
更新 文档的第一部分:foundation.zurb.com/sites/docs/sticky.html解释了所描述的行为.由于默认主体{height:100%} css,主体完全按最大值解释.视口高度.
所以在我的情况下解决方案是a)用auto替换body的高度.但更好b)避免对预期的固定标头使用粘性功能.
简单表单包含Foundation 5模板.
但是,我无法在Web上找到为Foundation 6修改的任何模板文件.
生成的表单与Foundation 6的结合程度如何？此外,任何慷慨的基金会6模板或修改现有模板的提示？
如何使用角度cli的基础6.I尝试使用普通的scss但是无法继续使用基础6 scss.我该如何处理这个问题.提前致谢.
我正在为我的网站使用 Foundation 框架，并且在更新到 Foundation 6.4.3 之前，此语法 Foundation.reInit('equalizer') 用于重新绑定/重排我的插件，例如用于动态创建的元素的均衡器。
更新到 6.4.3 后，它停止工作并会在标题中抛出错误“参考错误：我们很抱歉，_init 不是此元素的可用方法”。我知道这曾经有效，因为我在我的网站上使用过它，并且在更新之前它一直完美无缺。
我也试过做 new Foundation.Equalizer($('.eq-div')).applyHeight(); 我的浏览器会挂起并变得无响应，有什么理由这样做吗？
任何建议或帮助将不胜感激，谢谢！
angular ×2
javascript ×2
jquery ×2
angular-cli ×1
css ×1
gulp-sass ×1
html ×1
sass ×1
simple-form ×1
sticky ×1
wordpress ×1