путевые точки на нескольких элементах - обновление заголовка - PullRequest
Новая
       32

путевые точки на нескольких элементах - обновление заголовка

0 голосов
/ 14 мая 2018

Я использую путевые точки для изменения текста заголовков, когда пользователь прокручивает список изображений.Поскольку изображение прокручивается до 50% высоты области просмотра (50 Вч), для обновления основного заголовка используется связанный текст, установленный его атрибутом data-title.

Работает нормально при прокрутке вниз, но при прокрутке вверх заголовки не синхронизированы - я хочу, чтобы заголовок показывался только тогда, когда он находится над соответствующим изображением.

var headerPoint = $(".project").waypoint(
  function(direction) {
    var title = this.element.getAttribute("data-title");
    $("#header").text(title);
  },
  {
    offset: "50%"
  }
);
h1 {
  position:fixed;
left: 50%;
top:50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
  text-align:center;
}

#projects {
  margin:0 auto;
  width:400px;
  padding-top:400px;;
}
.project {
  background:pink;
  width:400px;
  height:600px;
  margin-bottom:100px;
}



* {
  margin:0;
  padding:0;
  box-sizing: border-box
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>

<h1 id="header">Header one</h1>

<div id="projects">
  <div data-title="Header one" class="project">1</div>
  <div data-title="Header two" class="project">2</div> 
  <div data-title="Header three" class="project">3</div> 
  <div data-title="Header four" class="project">4</div>  
</div>

1 Ответ

0 голосов
/ 14 мая 2018

Вы можете установить две путевые точки и проверить направление.

Для перехода вниз у вас есть правильное, и для подъема мое решение меняет заголовок, когда нижняя часть div достигает нижней части области просмотра.Не тогда, когда достигнет нижней части заголовка.

Вы можете попробовать другие значения offset, и я уверен, что вы получите именно то, что хотите.Вот удобная документация

Вот рабочий пример 

var headerPoint = $(".project");

headerPoint.waypoint({
  handler: function(direction) {
    if (direction === 'down') {
      var title = this.element.getAttribute("data-title");
      $("#header").text(title);
    }
  },
  offset: '50%'
});

headerPoint.waypoint({
  handler: function(direction) {
    if (direction === 'up') {
      var title = this.element.getAttribute("data-title");
      $("#header").text(title);

      //console.log($(window).height());
      //console.log(this.element.clientHeight);
    }
  },
  offset: 'bottom-in-view'
});
h1 {
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%) -webkit-transform: translateY(-50%);
  transform: translateY(-50%) text-align:center;
}

#projects {
  margin: 0 auto;
  width: 400px;
  padding-top: 400px;
  ;
}

.project {
  background: pink;
  width: 400px;
  height: 600px;
  margin-bottom: 100px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>

<h1 id="header">Header one</h1>

<div id="projects">
  <div data-title="Header one" class="project">1</div>
  <div data-title="Header two" class="project">2</div>
  <div data-title="Header three" class="project">3</div>
  <div data-title="Header four" class="project">4</div>
</div>

РЕДАКТИРОВАТЬ

Теперь он работает именно так, как вы хотели (при повышении срабатывает, когда нижний всередина экрана). 

var headerPoint = $(".project");

headerPoint.waypoint({
  handler: function(direction) {
    if (direction === 'down') {
      var title = this.element.getAttribute("data-title");
      $("#header").text(title);
    }
  },
  offset: '50%'
});

headerPoint.waypoint({
  handler: function(direction) {
    if (direction === 'up') {
      var title = this.element.getAttribute("data-title");
      $("#header").text(title);

      //console.log($(window).height());
      //console.log(this.element.clientHeight);
    }
  },
  offset: function() {
    return -this.element.clientHeight + ($(window).height()/2);
  }
});
h1 {
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%) -webkit-transform: translateY(-50%);
  transform: translateY(-50%) text-align:center;
}

#projects {
  margin: 0 auto;
  width: 400px;
  padding-top: 400px;
  ;
}

.project {
  background: pink;
  width: 400px;
  height: 600px;
  margin-bottom: 100px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>

<h1 id="header">Header one</h1>

<div id="projects">
  <div data-title="Header one" class="project">1</div>
  <div data-title="Header two" class="project">2</div>
  <div data-title="Header three" class="project">3</div>
  <div data-title="Header four" class="project">4</div>
</div>
...