在视口中按 div 动态更改页面标题

Question

我最近使用了 Viewport 插件，我试图在人们上下滚动时更改网站上的页面标题。我得到原始标题 + 未定义。谢谢！

    $(window).scroll(function () {   
var inview = $('div:in-viewport:first').attr('id');     


if (inview == 'about') 
{

var newtitle = 'About'

} else if (inview == 'Offers') 
{

var newtitle = 'Offer'

}  

else if (inview == 'contact') 
{

var newtitle = 'Contact'

}  



document.title = 'Orginal Site Title |' + newtitle;

});

Answer 1

您需要在 if/else if 语句之外声明 newtitle 变量并重新分配它。

$(window).scroll(function () {
    var inview = $('div:in-viewport:first').attr('id');
    var newtitle;

    if (inview == 'about') {

        newtitle = 'About'

    } else if (inview == 'Offers') {

        newtitle = 'Offer'

    } else if (inview == 'contact') {

        newtitle = 'Contact'

    }

    document.title = 'Orginal Site Title |' + newtitle;

});

Answer 2

这可能是 jQuery 和/或插件在创建 CSS 样式选择器时未按预期工作的情况。您可以尝试使用链式方法吗？

$('div:in-viewport').first().attr('id')

在视口中按 div 动态更改页面标题

Changing dynamically page Title by div in viewport

html

dynamic

viewport