Почему функция работает при resize?

Question

[partyzanx]

Во всех браузерах функция продолжает работать, хотя задан чёткий параметр if ($(window).width() >= 801){

Как переделать код, чтобы при изменении ширины экрана меньше 800пикселей она не срабатывала и наоборот?

$(window).on('load resize', function() { 
if ($(window).width() >= 801){



var toc = document.querySelector( '.toc' );
var tocPath = document.querySelector( '.toc-marker path' );
var tocItems;

// Factor of screen size that the element must cross
// before it's considered visible
var TOP_MARGIN = 0.1,
    BOTTOM_MARGIN = 0.2;

var pathLength;

window.addEventListener( 'resize', drawPath, false );
window.addEventListener( 'scroll', sync, false );

drawPath();

function drawPath() {
  
  tocItems = [].slice.call( toc.querySelectorAll( 'li' ) );

  // Cache element references and measurements
  tocItems = tocItems.map( function( item ) {
    var anchor = item.querySelector( 'a' );
    var target = document.getElementById( anchor.getAttribute( 'href' ).slice( 1 ) );

    return {
      listItem: item,
      anchor: anchor,
      target: target
    };
  } );

  // Remove missing targets
  tocItems = tocItems.filter( function( item ) {
    return !!item.target;
  } );

  var path = [];
  var pathIndent;

  tocItems.forEach( function( item, i ) {

    var x = item.anchor.offsetLeft - 5,
        y = item.anchor.offsetTop,
        height = item.anchor.offsetHeight;

    if( i === 0 ) {
      path.push( 'M', x, y, 'L', x, y + height );
      item.pathStart = 0;
    }
    else {
      // Draw an additional line when there's a change in
      // indent levels
      if( pathIndent !== x ) path.push( 'L', pathIndent, y );

      path.push( 'L', x, y );
      
      // Set the current path so that we can measure it
      tocPath.setAttribute( 'd', path.join( ' ' ) );
      item.pathStart = tocPath.getTotalLength() || 0;
      
      path.push( 'L', x, y + height );
    }
    
    pathIndent = x;
    
    tocPath.setAttribute( 'd', path.join( ' ' ) );
    item.pathEnd = tocPath.getTotalLength();

  } );
  
  pathLength = tocPath.getTotalLength();
  
  sync();
  
}

function sync() {
  
  var windowHeight = window.innerHeight;
  
  var pathStart = pathLength,
      pathEnd = 0;
  
  var visibleItems = 0;
  
  tocItems.forEach( function( item ) {

    var targetBounds = item.target.getBoundingClientRect();
    
    if( targetBounds.bottom > windowHeight * TOP_MARGIN && targetBounds.top < windowHeight * ( 1 - BOTTOM_MARGIN ) ) {
      pathStart = Math.min( item.pathStart, pathStart );
      pathEnd = Math.max( item.pathEnd, pathEnd );
      
      visibleItems += 1;
      
      item.listItem.classList.add( 'visible' );
    }
    else {
      item.listItem.classList.remove( 'visible' );
    }
    
  } );
  
  // Specify the visible path or hide the path altogether
  // if there are no visible items
  if( visibleItems > 0 && pathStart < pathEnd ) {
    tocPath.setAttribute( 'stroke-dashoffset', '1' );
    tocPath.setAttribute( 'stroke-dasharray', '1, '+ pathStart +', '+ ( pathEnd - pathStart ) +', ' + pathLength );
    tocPath.setAttribute( 'opacity', 1 );
  }
  else {
    tocPath.setAttribute( 'opacity', 0 );
  }

};

};



  });

Comments

[partyzanx]

Stalker_RED помоги плиз)

[partyzanx]

RAX7 помоги плиз)

[Антон Шаманов]

прям таки код загадка и нативный js и jquery)))
ковыляй в сторону

window.addEventListener( 'resize', drawPath, false );
window.addEventListener( 'scroll', sync, false );

[RAX7]

partyzanx, я не совсем понял что ты хочешь сделать, но наверное типа такого https://jsfiddle.net/d1ybs4og/

[partyzanx]

RAX7 весь сыр-бор из-за этого скрипта

я хочу, чтобы он работал при ширине >=801 и при рисайзе отключался/включался

возможно ли как-то этот скрипт упростить?

[RAX7]

partyzanx, так? https://codepen.io/anon/pen/ywBqQZ?editors=1010

[partyzanx]

RAX7,

[RAX7]

partyzanx, https://codepen.io/anon/pen/ywBqQZ?editors=1010
вообще можно было про через css скрыть .toc-marker

Answer 1

[Stalker_RED]

Работает:
https://jsfiddle.net/985vopbg/1/

Comments

[partyzanx]

как сделать, чтобы else { функция откатывалась} ?

[Stalker_RED]

partyzanx, в каком смысле "функция откатывалась"?

[partyzanx]

Stalker_RED, весь сыр-бор из-за этого скрипта

я хочу, чтобы он работал при ширине >=801 и при рисайзе отключался/включался

возможно ли как-то этот скрипт упростить?

[Stalker_RED]

partyzanx, в каком смысле "выключался"?
Нужно скрыть это боковое меню?

[partyzanx]

Stalker_RED, чтобы исчезла линия и исчезла появление отступа для активной ссылки

[Stalker_RED]

partyzanx, убрать их медиазапросом не вариант?

[partyzanx]

Stalker_RED, вариант, я хз что это значит)

[Stalker_RED]

partyzanx,

@media screen and (max-width: 800px) { /* если ширина меньше 800 */
  .foobar { /* скрываем такую-то штуку */
    display: none;
  }
}

Подробнее гуглить "медиа запросы css"

Answer 2

[Nikolay S.]

Я вижу ваш код как то так:

jQuery(document).ready(function($) {
    var toc = document.querySelector( '.toc' );
    var tocPath = document.querySelector( '.toc-marker path' );
    var tocItems;

    // Factor of screen size that the element must cross
    // before it's considered visible
    var TOP_MARGIN = 0.1,
    BOTTOM_MARGIN = 0.2;

    var pathLength;

    function drawPath() {
      ...
    }

    function sync() {
      ...
    };

    $(window).on('scroll resize', function(e) {
        if ($(window).width() >= 801) {
            drawPath();
            sync();
        }
    }).trigger('resize');
});

Обратите внимание что вы задаете

window.addEventListener( 'resize', drawPath, false );
window.addEventListener( 'scroll', sync, false );

Внутри события resize. То есть каждый раз когда вы изменяете размер окна задаете новое событие.

Comments

[Nikolay S.]

Увидел коммент на ответ: как сделать, чтобы else { функция откатывалась} ?
Если правильно понял, как то так:

...
var isDrowed = false;

// обратные действия
function reDrawPath() {
    ...
}
function reSync() {
    ...
}

$(window).on('scroll resize', function(e) {
    if ($(window).width() >= 801) {
        if( !isDrowed ) {
            drawPath();
            sync();

            isDrowed = true;
        }
    }
    else {
        if( isDrowed ) {
            reDrawPath();
            reSync();

            isDrowed = false;
        }
    }
}).trigger('resize');
...

UPD:
Еще случайно заметил вызов sync в drawpath тогда так дабы не повторятся:

...
var isDrowed = false;

// обратные действия
function reDrawPath() {
    ...

    reSync();
}
function reSync() {
    ...
}

$(window).on('scroll resize', function(e) {
    if ($(window).width() >= 801) {
        if( !isDrowed ) {
            drawPath();

            isDrowed = true;
        }
    }
    else {
        if( isDrowed ) {
            reDrawPath();

            isDrowed = false;
        }
    }
}).trigger('resize');
...

[partyzanx]

Nikolay S., весь сыр-бор из-за этого скрипта

я хочу, чтобы он работал при ширине >=801 и при рисайзе отключался/включался

возможно ли как-то этот скрипт упростить?