根據部門的標題更改頁面的標題

Question

當指定的元素對視口可見時，頁面的標題會因為元素對視口可見而改變，但是如何根據分區的“標題”更改標題

這是 jsFiddle，隨意復制粘貼它來嘗試它
實時查看/測試結果

（一些代碼來自 GitHub 存儲庫“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 條 -> 默認 -> 第 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()來查看數據。

我還建議取消滾動事件的抖動，以便在滾動時不會有太多開銷。