部門のタイトルに従ってページのタイトルを変更する

Question

指定された要素がビューポートに表示されると、その要素がビューポートに表示されるためページのタイトルが変更されますが、部門の「タイトル」

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

（コードの一部は、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() { // 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 
     } 
}); 
}); 

EDIT このコードを使用するデフォルトのタイトルを設定するために。 'defaultTitle'変数を編集してデフォルトのタイトルを設定します。それ以外の場合は、タイトルが自動的に検出されます。 > Defualt - - あなたの目標は2遠く離れている場合、それは第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> 

：https://jsfiddle.net/mnzLkdc8/1/ノートのページのタイトルはフィドル自身で変更することはできませんが、あなたが見ることがconsole.log()を使用することができます：

$(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; 
     } 
    }); 
}); 

はここにフィドルですデータ。

スクロールイベントが発生すると、スクロールが発生するためオーバーヘッドが大きくならないようにスクロールイベントをお勧めします。debouncing代わりにこのコードを使用して複数のターゲットと、この作業を行うために

$(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. 
}}}); 

EDIT ：私が得た