所以,我使用Alvaro Trigo的Fullpage.js建立了一个小网站。我一直在尝试在整个网站中加入Google DFP广告,但由于我在Javascript方面非常弱,因此遇到了很多问题。到目前为止,我能够使用afterLoad回调选项包括Google分析和Jquery DFP。看起来非常hacky,但这是我的代码:
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['home', 'sponsors', 'self-breast-exam', 'screening', 'treatment', '2015-luncheon', '2014-luncheon', 'non-profit-organizations', 'news', 'events', 'contact'],
menu: '#menu',
paddingTop: '37px',
autoScrolling: true,
scrollBar: true,
slidesNavigation: false,
normalScrollElements: ('#feed-control, #feed-control2'),
fitToSection: true,
scrollOverflow: true,
afterLoad:
function(anchorLink, index){
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-3905646-12', 'domain.nl');
ga('send', 'pageview', { 'page': anchorLink, 'title': anchorLink });
$(".selfexamAd").dfp({
dfpID: '422616648',
collapseEmptyDivs: 'original',
sizeMapping: {
'my-default': [
{browser: [1024, 768], ad_sizes: [728, 90]},
{browser: [600, 0], ad_sizes: [468, 60]},
{browser: [500, 0], ad_sizes: [320, 50]},
{browser: [0, 0], ad_sizes: [320, 50]}
]}
});
},
});
});
</script>
这似乎或多或少地完成了我想要做的事情,但我遇到的问题似乎是触发scrollOverflow选项的部分。似乎使用鼠标滚轮滚动停止在内容垂直延伸到视口之外的部分的末尾。然后,您无法使用鼠标滚轮滚动到下一部分。不溢出的部分似乎不受影响,并使用鼠标滚轮正常滚动。有人知道我能做些什么来解决这个问题吗?