>

필요한 동작은 다음과 같습니다.

<올>
  • 노란색 스팬은 뷰포트 ( position:fixed; )에 상대적으로 배치되어야합니다 )가 핑크색 div 안에있을 때
  • 노란색 스팬의 높이는 항상 뷰포트 높이에서 100px를 뺀 것과 같아야합니다. 너비는 px로 고정되어 있습니다.
  • 노란색 스팬은 뷰포트 중심에 수직으로 위치해야합니다 (이 규칙은 규칙 4에 의해 수정 됨).
  • 스크롤시 노란색 범위가 분홍색 div의 경계를 벗어나면 안됩니다. 페이지가 분홍색 div보다 더 많이 스크롤되면 노란색 범위가 분홍색 div의 하단에 절대로 위치하고 위로 스크롤해야합니다
  • 페이지가 분홍색 div로 다시 스크롤되면 노란색 범위는 고정 위치 (규칙 1 및 2에서와 같이)로 되돌아 가야합니다.
  • 스티커 포지셔닝 은 유감이지만 불량 브라우저 지원 으로 인해 사용할 수 없습니다. 그래서 나는이 스 니펫을 만들었고 그것이 최적화되거나 단축 될 수 있는지 알고 싶습니다 :

    $(document).scroll(function() {
      var span = $('span'),
        div = $('div'),
        spanHeight = span.outerHeight(),
        divHeight = div.height(),
        spanOffset = span.offset().top + spanHeight,
        divOffset = div.offset().top + divHeight;
      if (spanOffset >= divOffset) {
        span.addClass('bottom');
        var windowScroll = $(window).scrollTop() + $(window).height() - 50;
        if (spanOffset > windowScroll) {
          span.removeClass('bottom');
        }
      }
    });
    
    

    *{margin:0;}
    div {
      position: relative;
      background: pink;
      height: 800px;
      margin-bottom: 800px;
    }
    span {
      position: fixed;
      right: 0;
      bottom: 50px;
      width: 10%;
      height: calc(100vh - 100px);
      background: gold;
    }
    .bottom {
      position: absolute;
      bottom: 0;
      right: 0;
    }
    
    

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <div>
      <span>some content</span>
    </div>
    
    

    • 답변 # 1

      이것은 아직 완전한 답은 아니지만, 귀하의 질문에 대한 나의 해석을 수정 한 후에 (아래의 의견에 반영됨) 나는 약간의 불확실성을 가지고 있으며, 의견은 명확하게 표현할만큼 넓지 않습니다.

      어쨌든 나는 더 이상의 정밀도에 의존하지 않고 가능한 개선 사항을 이미 알 수 있습니다 :

      화장품: right: 0;   span.bottom 에서 속성을 억제 할 수 있습니다   span 에 비해 변경되지 않기 때문에 규칙  하나.

      성능:

      그들의 가치는 변하지 않기 때문에, span 의 선언 divdivHeight   scroll() 밖으로 이동할 수 있습니다  이벤트.

      우리도 $(window) 를 고칠 수 있습니다  그것을 var win 로 선언함으로써  같은 수준에서.

      작업: 창 크기에 따라 초기 상태가 요구 사항을 따르지 않을 수 있습니다 (예 :

      코드 스 니펫을 실행하고 즉시 전체 페이지로 전환 할 때 노란색 스팬에는 bottom 가 있어야합니다  그렇지 않은 동안 수업을합니다.

      전체 페이지와 축소 된 iframe간에 전환 할 때도 마찬가지입니다. 새 창 크기에 도달 할 때 상태가 변경되면 스크롤이 발생할 때까지 바뀌지 않습니다.

      그런 다음 bottom 에 영향을 주거나 떨어 뜨리는 계산을 피하십시오.   document.scroll() 때뿐만 아니라 클래스가 발생해야  뿐만 아니라 window.resize()  이벤트가 발생합니다.
      또한 각 이벤트는 처음에 시작해야합니다 (실제로는 하나만으로도 충분합니다).

      다음은 수정 된 스 니펫입니다.

      var span = $('span'),
          div = $('div'),
          win = $(window),
          divHeight = div.height();
      $(document).scroll(compute).scroll();
      $(window).resize(compute).resize();
        
      function compute() {
        var spanHeight = span.outerHeight(),
            spanOffset = span.offset().top + spanHeight,
            divOffset = div.offset().top + divHeight;
        if (spanOffset >= divOffset) {
          span.addClass('bottom');
          var windowScroll = win.scrollTop() + win.height() - 50;
          if (spanOffset > windowScroll) {
            span.removeClass('bottom');
          }
        }
        console.log('spanOffset='+spanOffset, 'windowScroll='+($(window).scrollTop() + $(window).height() - 50));
      }
      
      

      *{margin:0;}
      div {
        position: relative;
        background: pink;
        height: 800px;
        margin-bottom: 800px;
      }
      span {
        position: fixed;
        right: 0;
        bottom: 50px;
        width: 10%;
        height: calc(100vh - 100px);
        background: gold;
      }
      .bottom {
        position: absolute;
        bottom: 0;
      }
      
      

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
      <div>
        <span>some content</span>
      </div>
      
      

      이제 난리가 계속되는 것을 설명하겠습니다.
      두 스 니펫 (귀하와 내) 모두 다음과 같은 잘못된 동작을합니다. 특정 창 높이에서 (정확히 파악할 수는 없음), 하단으로 전환하면 스크롤 할 때 노란색 스팬이 다시 돌아 가지 않습니다.

      따라서 더 깊이 생각하기 전에 정확히 당신의 필요가 무엇인지 확신하고 싶습니다. 현재 구현과 독립적으로 표현하면 다음과 같습니다.

      <올>

      기본 요구 사항으로, 노란색 스팬 높이는 항상 창 높이에서 주어진 높이 (예 : X,이 경우 100px)를 뺀 값과 같아야하며 변경해서는 안됩니다

      아래의 규칙 # 3으로 화를 내지 않으면 노란색 스팬이 창에서 수직으로 중앙에 위치해야합니다 (하단은 지정된 X의 절반 임).

      규칙 # 2를 취하면 노란색 스팬이 분홍색 div를 절대 가로 질러서는 안됩니다 (이전의 아래쪽은 후자의 것보다 아래로 이동할 수 없습니다)

      현재는 보류 중입니다. 확인 또는 수정 해 주셔서 감사합니다.

    관련 자료

  • 이전 스칼라의 비슷한 2 클래스는 리팩토링해야합니다
  • 다음 스칼라와 일부 Scalaz를 사용한 간단한 아나그램 파인더