썸네일 게시판에 fixed 좌우버튼을 만들방법이 없을까요?

http://soopforest.co.kr/all-pet/?uid=369&mod=document&pageid=1

케이보드 썸네일 게시판을 사용중인데 사용자들이 활용을 할수 있도록

따라오는 좌우버튼을 만들고싶습니다. 하단에 좌우로 이동하는 버튼을 코딩으로

활용해보려 했지만 상단 배너와 풋터를 넘나들어서 다른방법을

찾는중입니다 부탁드려요ㅠ

 

만들고싶은 부분의 이미지입니다. > https://imgur.com/a/zH5I5Rb

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    화면 스크롤을 따라다니게 하시려면

    CSS 속성 중 position fixed 속성을 활용하시면 가능합니다.

    position 속성에 대한 자세한 내용은

    아래 링크를 참고해보세요.

    https://www.w3schools.com/css/css_positioning.asp

     

    직접 코드를 수정하기 어려우시다면

    프로젝트 의뢰에 상세 내용을 올려보세요.

    https://www.cosmosfarm.com/project

    고맙습니다.

  • 안녕하세요~^^

    화면 스크롤을 따라다니게 하려면 CSS 속성 중 position fixed를 사용하면

    가능하단건 알고있답니다. 혹시나 오해를 하신 부분이 있으신거 같은데

    페이지를 혹시나 보셨다면 배너와 하단 배너를 침범하는 모습을 확인하실수 있으실에요~

    기능이나 방법이 없을지 물어본건데 결제를 통해 프로젝트를 이용하면

    돈을내고 기능을 만들어 주신다는건지도 다시한번 확인 부탁드립니다 :)

  • KBoard 본문 내용 내에서만 이전 다음 화살표가

    떠있길 원하시는 건가요?

     

    wp-content/plugins/kboard/skin/thumbnail/document.php 파일 중

    <div class="kboard-document-navi">
      <div class="kboard-prev-document">
        <?php
        $bottom_content_uid = $content->getPrevUID();
        if($bottom_content_uid):
        $bottom_content = new KBContent();
        $bottom_content->initWithUID($bottom_content_uid);
        ?>
        <a href="<?php echo esc_url($url->getDocumentURLWithUID($bottom_content_uid))?>" title="<?php echo esc_attr(wp_strip_all_tags($bottom_content->title))?>">
          <span class="navi-arrow">«</span>
          <span class="navi-document-title kboard-thumbnail-cut-strings"><?php echo wp_strip_all_tags($bottom_content->title)?></span>
        </a>
        <?php endif?>
      </div>
      
      <div class="kboard-next-document">
        <?php
        $top_content_uid = $content->getNextUID();
        if($top_content_uid):
        $top_content = new KBContent();
        $top_content->initWithUID($top_content_uid);
        ?>
        <a href="<?php echo esc_url($url->getDocumentURLWithUID($top_content_uid))?>" title="<?php echo esc_attr(wp_strip_all_tags($top_content->title))?>">
          <span class="navi-document-title kboard-thumbnail-cut-strings"><?php echo wp_strip_all_tags($top_content->title)?></span>
          <span class="navi-arrow">»</span>
        </a>
        <?php endif?>
      </div>
    </div>

    위 코드를 적절히 배치, css를 수정한 후,

    jQuery를 통해 스크롤이 특정 위치보다 아래로 왔을 때 postion 속성이 변경되게 만들거나

    더 간단하게는 침범하는 요소들의 z-index 들을 조정하여

    겹쳤을 때 화살표가 보이지 않게 하는 방법등도 고려해보실 수 있을 듯 합니다.

     

    스크롤의 위치를 구하는 방법은 아래 링크를 참고해주세요.

    https://api.jquery.com/scrolltop/

    요소의 높이를 구하는 방법은 아래 링크를 참고해주세요.

    https://api.jquery.com/height/

     

    아래 링크에서 유료기술지원에 관한 내용을 확인하실 수 있으며

    내부일정에 따라 순차적으로 회신드립니다.

    https://www.cosmosfarm.com/support

     

    프로젝트의뢰는 저희쪽에 요청하는 것이 아니라

    수행할 수 있는 개발자에게 필요한 작업을 직접 요청할 수 있게

    만들어 둔 공간입니다.

    https://www.cosmosfarm.com/project

    고맙습니다.

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기