主页 / 问题 / 687554
Accepted
Елизавета Чепцова
Asked:2020-07-05 19:24:58 +0000 UTC2020-07-05 19:24:58 +0000 UTC

请帮助重现js中section标签中的data-offset属性

  • 772

通过菜单项，同样校正设置为40px。代码需要改进，以便可以通过data-offset标签属性单独设置此修改section。那些。可以为一个屏幕60px、另一个屏幕20px等设置修正。

(function ($) {
        $(document).ready(function () {
    
          
            function lpHeader() {
                if ($(window).scrollTop() == 0) {        $('header').addClass('top'); 
                } else {
                    $('header.top').removeClass('top'); 
                }
            }
            
            lpHeader(); 
            $(window).on('scroll', lpHeader);
          
            var lpNav = $('header ul');
            
            lpNav.find('li a').on('click', function (e) {
                
                var linkTrgt = $($(this).attr('href'));
                if (linkTrgt.length > 0) { 
                    e.preventDefault(); 
                    var offset = linkTrgt.offset().top; 
                    $('body, html').animate({
                        scrollTop: offset - 40
                    }, 750);
                }
            });
    
           
            function lpSetNavActive() {
                
                var curItem = '';
                
                $('section').each(function () {
                     
                    if ($(window).scrollTop() > $(this).offset().top - 200) {
                        curItem = $(this).attr('id');
                    }
                });
            
          
                if (lpNav.find('li.active a').attr('href') != '#' + curItem || lpNav.find('li.active').length == 0) {
                    
                    lpNav.find('li.active').removeClass('active');
                    
                    lpNav.find('li a[href="#' + curItem + '"]').parent().addClass('active');
                }
            }
            
            lpSetNavActive();
            $(window).on('scroll', lpSetNavActive);
    
        });
    })(jQuery);
header {
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.3);
        width: 100%;
        z-index: 100;
    }
    
    header ul {
        padding: 0;
        margin: 0;
        text-align: center;
    }
    
    header ul li {
        display: inline-block;
    }
    
    header ul li a,
    header ul li a:focus {
        display: inline-block;
        padding: 10px 20px;
        color: #fff;
        text-transform: uppercase;
        text-decoration: none;
        transition: color .25s, padding .25s;
    }
    
    header ul li a:hover,
    header ul li.active a {
        color: #337ab7;
        text-decoration: none;
    }
    
    header.top ul li a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    
    .lp-content {
        min-height: 500px;
        border: 1px dashed red;
        padding: 40px 0;
    }
    
    .lp-content h2 {
        text-align: center;
        color: #337ab7;
        margin: 0 0 20px 0;
    }
    
    footer {
        background: #337ab7;
        padding: 25px;
    }
    
    footer p {
        text-align: center;
        margin: 0;
        color: #fff;
    }
<!DOCTYPE html>
<html lang="ru">

    <head>
        <meta charset="UTF-8">
        <title>Landing Page</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    
    <body>
    
        <header>
            <div class="container">
                <ul>
                    <li><a href="#slideshow">Главная</a></li>
                    <li><a href="#services">Услуги</a></li>
                    <li><a href="#portfolio">Портфолио</a></li>
                    <li><a href="#prices">Цены</a></li>
                    <li><a href="#contacts">Контакты</a></li>
                </ul>
                
            </div>
        </header>
    
        <section id="slideshow" >
            <div class="container">
                <div class="lp-content">
                    <h2>Слайдшоу</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam quos modi omnis deleniti enim labore totam laudantium minus doloremque ab qui, illo aspernatur, sit cum error eum repudiandae tenetur ea.</p>
                </div>
            </div>
        </section>
    
        <section id="services">
            <div class="container">
                <div class="lp-content">
                    <h2>Наши услуги</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam quos modi omnis deleniti enim labore totam laudantium minus doloremque ab qui, illo aspernatur, sit cum error eum repudiandae tenetur ea.</p>
                </div>
            </div>
        </section>
    
        <section id="portfolio" data-offset="20">
            <div class="container">
                <div class="lp-content">
                    <h2>Наши работы</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam quos modi omnis deleniti enim labore totam laudantium minus doloremque ab qui, illo aspernatur, sit cum error eum repudiandae tenetur ea.</p>
                </div>
            </div>
        </section>
    
        <section id="prices">
            <div class="container">
                <div class="lp-content">
                    <h2>Наши цены</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam quos modi omnis deleniti enim labore totam laudantium minus doloremque ab qui, illo aspernatur, sit cum error eum repudiandae tenetur ea.</p>
                </div>
            </div>
        </section>
    
        <section id="contacts">
            <div class="container">
                <div class="lp-content">
                    <h2>Контакты</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam quos modi omnis deleniti enim labore totam laudantium minus doloremque ab qui, illo aspernatur, sit cum error eum repudiandae tenetur ea.</p>
                </div>
            </div>
        </section>
    
        <footer>
            <div class="container">
                <p>© Landing Page 2017</p>
            </div>
    
        </footer>
      
    
    </body>
    
    </html>

javascript

1 个回答

  1. Best Answer

    首先，您需要输入一个新变量，例如dataOffset = 40. 然后，在计算滚动位置之前，我们linkTrgt检查data-offset. 如果它存在，我们解析它并将结果值写入dataOffset.

    (function($) {
  $(document).ready(function() {


    function lpHeader() {
      if ($(window).scrollTop() == 0) {
        $('header').addClass('top');
      } else {
        $('header.top').removeClass('top');
      }
    }

    lpHeader();
    $(window).on('scroll', lpHeader);

    var lpNav = $('header ul');

    lpNav.find('li a').on('click', function(e) {

      var linkTrgt = $($(this).attr('href'));
      if (linkTrgt.length > 0) {
        var dataOffset = 40;
        if (linkTrgt.attr('data-offset')) {
          dataOffset = parseInt(linkTrgt.attr('data-offset'));
        }
        e.preventDefault();
        var offset = linkTrgt.offset().top;
        $('body, html').animate({
          scrollTop: offset - dataOffset
        }, 750);
      }
    });


    function lpSetNavActive() {

      var curItem = '';

      $('section').each(function() {

        if ($(window).scrollTop() > $(this).offset().top - 200) {
          curItem = $(this).attr('id');
        }
      });


      if (lpNav.find('li.active a').attr('href') != '#' + curItem || lpNav.find('li.active').length == 0) {

        lpNav.find('li.active').removeClass('active');

        lpNav.find('li a[href="#' + curItem + '"]').parent().addClass('active');
      }
    }

    lpSetNavActive();
    $(window).on('scroll', lpSetNavActive);

  });
})(jQuery);
    header {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  z-index: 100;
}

header ul {
  padding: 0;
  margin: 0;
  text-align: center;
}

header ul li {
  display: inline-block;
}

header ul li a,
header ul li a:focus {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .25s, padding .25s;
}

header ul li a:hover,
header ul li.active a {
  color: #337ab7;
  text-decoration: none;
}

header.top ul li a {
  padding-top: 15px;
  padding-bottom: 15px;
}

.lp-content {
  min-height: 500px;
  border: 1px dashed red;
  padding: 40px 0;
}

.lp-content h2 {
  text-align: center;
  color: #337ab7;
  margin: 0 0 20px 0;
}

footer {
  background: #337ab7;
  padding: 25px;
}

footer p {
  text-align: center;
  margin: 0;
  color: #fff;
}
    <!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <title>Landing Page</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>

  <header>
    <div class="container">
      <ul>
        <li><a href="#slideshow">Главная</a></li>
        <li><a href="#services">Услуги</a></li>
        <li><a href="#portfolio">Портфолио</a></li>
        <li><a href="#prices">Цены</a></li>
        <li><a href="#contacts">Контакты</a></li>
      </ul>

    </div>
  </header>

  <section id="slideshow" data-offset="10">
    <div class="container">
      <div class="lp-content">
        <h2>Слайдшоу</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam quos modi omnis deleniti enim labore totam laudantium minus doloremque ab qui, illo aspernatur, sit cum error eum repudiandae tenetur ea.</p>
      </div>
    </div>
  </section>

  <section id="services">
    <div class="container">
      <div class="lp-content">
        <h2>Наши услуги</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam quos modi omnis deleniti enim labore totam laudantium minus doloremque ab qui, illo aspernatur, sit cum error eum repudiandae tenetur ea.</p>
      </div>
    </div>
  </section>

  <section id="portfolio" data-offset="20">
    <div class="container">
      <div class="lp-content">
        <h2>Наши работы</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam quos modi omnis deleniti enim labore totam laudantium minus doloremque ab qui, illo aspernatur, sit cum error eum repudiandae tenetur ea.</p>
      </div>
    </div>
  </section>

  <section id="prices">
    <div class="container">
      <div class="lp-content">
        <h2>Наши цены</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam quos modi omnis deleniti enim labore totam laudantium minus doloremque ab qui, illo aspernatur, sit cum error eum repudiandae tenetur ea.</p>
      </div>
    </div>
  </section>

  <section id="contacts">
    <div class="container">
      <div class="lp-content">
        <h2>Контакты</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam quos modi omnis deleniti enim labore totam laudantium minus doloremque ab qui, illo aspernatur, sit cum error eum repudiandae tenetur ea.</p>
      </div>
    </div>
  </section>

  <footer>
    <div class="container">
      <p>© Landing Page 2017</p>
    </div>

  </footer>


</body>

</html>

    • 0

相关问题