Question

当视口可以看到指定的元素时，页面的标题会发生变化，因为视口中的元素是可见的，但如何根据分割的“标题”更改标题

This is the jsFiddle, Feel free copy paste it to try it tho
Live Viewing/Testing for Results

（有些代码来自GitHub repo“jQuery.isOnScreen”;我没有权利说它是我的，但我正在尝试使用它并为我的网站修改它，赞誉到最初的开发：D）

顺便说一句，这是javaScript代码：

// This Gets the Article Title from a Division!

$.fn.is_on_screen = function(){
    var win = $(window);
    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};

if( $('.target').length > 0 ) { // if target element exists in DOM
    if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded
      document.title = "An Article"; // show this if visible
    } else {
        document.title = "Prospekt | A Gaming Community"; // show this if NOT visible
    }
}
$(window).scroll(function(){ // bind window scroll event
    if( $('.target').length > 0 ) { // if target element exists in DOM
        if( $('.target').is_on_screen() ) { // show this if it's visible to dom
            document.title = 'It is Magic! | Stackoverflow'; // show this if visible
        } else {
        document.title = "Prospekt | A Gaming Community"; // show this if not visible
        }
    }
});

Answer 1

我得到的解决方案是替换此代码

if( $('.target').length > 0 ) { // if target element exists in DOM
if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded
  document.title = "An Article"; // show this if visible
} else {
    document.title = "Prospekt | A Gaming Community"; // show this if NOT visible
}} 
$(window).scroll(function(){ // bind window scroll event
if( $('.target').length > 0 ) { // if target element exists in DOM
    if( $('.target').is_on_screen() ) { // show this if it's visible to dom
        document.title = 'It is Magic! | Stackoverflow'; // show this if visible
    } else {
    document.title = "Prospekt | A Gaming Community"; // show this if not visible
    }
}
});

使用此代码：

$(window).scroll(function(){ // bind window scroll event
        if( $('.target').length > 0 ) { // if target element exists in DOM
if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded
  document.title =  $('.target')[0].title; // changes the document title to the target title.
}}});

修改为了使这项工作与更多目标一起使用，请使用此代码。

$(window).scroll(function() { // binds window scroll event $.each($('.target'), function(index, value) { //for each element in the target class theTarget = value //sets the variable theTarget to the value of the current index of the target class if ($(theTarget).is_on_screen() && theTarget) { // if theTarget element is visible on screen after DOM loaded and(&&) theTarget exists document.title = theTarget.title; // changes the document title to the theTarget's title } }); });

修改要设置默认标题，请使用此代码。编辑'defaultTitle'变量以设置默认标题，否则它会自动检测标题。如果您的目标距离相差很远，则会导致标题从第2条更改为＆gt; Defualt - ＆gt;第3条。代码：

var defaultTitle = document.title; //automatically gets original title from the title element and stores it in a variable. you can also just set a title here as the default. $(window).scroll(function() { // binds window scroll event if (!$('.target').is_on_screen()) {//if all of the targets are not on screen. document.title = defaultTitle; //set the title to the default } $.each($('.target'), function(index, value) { //for each element in the target class theTarget = value; //sets the variable theTarget to the value of the current index of the target class if ($(theTarget).is_on_screen() && theTarget) { // if theTarget element is visible on screen after DOM loaded and(&&) theTarget exists document.title = theTarget.title; // changes the document title to the theTarget's title } }); });//only triggers on scroll, you may want to also put it in $(document).ready()

Answer 2

您需要做的第一件事是确定您的元素在视口中是否可见。你已经完成了这个代码，所以我没有打扰它。

接下来，您需要获得一个标题。而不是让所有这些额外的JS，我认为如果你把标题放在标记中可能是最好的。理想情况下，您的页面将在已经有标题的部分中，您可以从那里获取文本。

<section>
  <h1>This is a heading for this section</h1>
  <p>Some content goes here.</p>
</section>

也许在其他情况下，您不希望标题选择标题。对于那些时候，我们也可以从数据属性中获取它。

<section data-page-title="Section with data attribute title">
  <p>
    This section has no heading, but its title comes from a data attribute!
  </p>
</section>

我们可以使用简单的代码处理这两种情况：

$(window).scroll(function () {
    var $sectionEl;
    $('section').each(function (index, sectionEl) {
        $sectionEl = $(sectionEl);
        if ($sectionEl.isOnScreen()) {
            document.title = 'Title Prefix | ' + (
            $sectionEl.data('pageTitle') ||
            $sectionEl.find('h1,h2,h3,h4,h5,h6').text().trim()
          );
          return false;
        }
    });
});

这是一个小提琴：https://jsfiddle.net/mnzLkdc8/1/请注意，页面标题不能在小提琴中更改，但您可以使用console.log()查看数据。

我还建议debouncing滚动事件，以便在滚动发生时没有太多开销。

根据部门的标题更改页面标题

2 个答案: