Question

我想使用jquery使这个div（第一个块右）跟随滚动。这是一个侧面的分歧。

<div class="first-block-right">
    <div class="recentnews">
        <p>Recent News and article</p>
    </div>
    <ul>
        <li><a href="#">Contraty to popular belief, Lorem Ipsum is not siply random text</a></li><hr>
        <li><a href="#"> There are many variations of passages of lorem Ipusum abailable</a></li><hr>
        <li><a href="#"> Title of new goes here</a></li><hr>
        <li><a href="#"> Contraty to popular belief, Lorem Ipsum is not siply random text</a></li><hr>
        <li><a href="#"> There are many variations of passages of lorem Ipusum abailable</a></li><hr>
        <li><a href="#"> Title of new goes here</a></li><!-- <hr>
        <li><a href="#"> There are many variations of passages of lorem Ipusum abailable</a></li><hr> -->
    </ul>
</div>

Answer 1

将css和addClass与jquery一起使用。

＆＃13;

$('.first-block-right').addClass('newclass');

＆＃13;

.newclass{
 overflow: auto;
 height:100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first-block-right">
          <div class="recentnews">
             <p>Recent News and article</p>
          </div>
          <ul>
            <li><a href="#">Contraty to popular belief, Lorem Ipsum is not siply random text</a></li><hr>
            <li><a href="#"> There are many variations of passages of lorem Ipusum abailable</a></li><hr>
            <li><a href="#"> Title of new goes here</a></li><hr>
            <li><a href="#"> Contraty to popular belief, Lorem Ipsum is not siply random text</a></li><hr>
            <li><a href="#"> There are many variations of passages of lorem Ipusum abailable</a></li><hr>
            <li><a href="#"> Title of new goes here</a></li><!-- <hr>
            <li><a href="#"> There are many variations of passages of lorem Ipusum abailable</a></li><hr> -->
          </ul>
        </div>

＆＃13;

Answer 2

(function($) {
    var element = $('.follow-scroll'),
        originalY = element.offset().top;
    
    // Space between element and top of screen (when scrolling)
    var topMargin = 20;
    
    // Should probably be set in CSS; but here just for emphasis
    element.css('position', 'relative');
    
    $(window).on('scroll', function(event) {
        var scrollTop = $(window).scrollTop();
        
        element.stop(false, false).animate({
            top: scrollTop < originalY
                    ? 0
                    : scrollTop - originalY + topMargin
        }, 300);
    });
})(jQuery);

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

.group:after { content: ""; display: table; clear: both; }

body { font: 15px/20px sans-serif; color: #444; }
p { margin-bottom: 30px; }

.wrapper { width: 100%; max-width: 700px; padding: 3%; }

.content, .sidebar { float: left; }

.content { width: 68%; margin-right: 5%; }

.sidebar { width: 27%; }

.box { background: #eee; border: 1px solid #ccc; padding: 10px; margin-bottom: 20px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper group">
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam euismod arcu ut diam maximus auctor. Sed malesuada maximus tellus, dignissim volutpat urna hendrerit at. Cras nisi turpis, mattis vitae ornare ut, bibendum et massa. Nulla at tellus a arcu luctus ultrices ac non felis. Maecenas euismod efficitur ipsum vel vestibulum. Nam imperdiet ipsum nunc, sit amet varius felis maximus quis. Etiam efficitur, mauris placerat luctus facilisis, ligula sem pellentesque nunc, ac viverra tellus velit sit amet purus. Proin a nunc id quam tempor blandit vitae id orci. Cras lectus turpis, varius nec elementum venenatis, suscipit ut nisl.</p>
        <p>Nulla condimentum est in leo mollis, sit amet varius erat pulvinar. Donec posuere turpis non est ultrices lobortis. Donec commodo aliquam sodales. Ut id finibus velit. Aenean tempus eget nulla at condimentum. Ut a arcu quis dui ultricies efficitur. Vestibulum suscipit diam ullamcorper velit tempor, in ullamcorper odio sollicitudin. Vestibulum congue nisl nibh, ut elementum quam tristique non. Nulla in sollicitudin dolor. Morbi ac justo nulla. Suspendisse massa neque, vestibulum id dolor non, congue rhoncus nibh.</p>
        <p>Phasellus porta tellus vel ipsum vehicula, nec fermentum lectus porta. Aenean viverra magna eu risus lacinia malesuada. Sed molestie auctor pharetra. Aliquam erat volutpat. Vestibulum in mi a orci tincidunt pellentesque. Sed et lectus eros. Nam imperdiet neque eu dolor gravida, interdum pellentesque justo rhoncus. Morbi tincidunt, ex nec pellentesque pulvinar, dui nulla tempor ipsum, sed consequat est tortor at neque. Suspendisse sed consequat urna. Nullam luctus, sem convallis volutpat mollis, sapien odio finibus elit, vitae fringilla enim leo sed velit. Vivamus fringilla ante laoreet blandit porta. Sed condimentum ut erat nec dignissim.</p>
        <p>Morbi ac scelerisque metus. Donec rhoncus diam urna, nec aliquet ex mollis ut. Sed a arcu ac risus semper pellentesque ut non nibh. Phasellus eu ullamcorper sem. Maecenas at tortor faucibus, consequat risus sed, egestas sapien. Suspendisse tortor lacus, congue sed velit vel, dictum sagittis eros. Proin eu nisl viverra, mattis velit vitae, tempor turpis. Ut sodales lacus in iaculis faucibus. Integer non metus non nulla malesuada rutrum ac non ipsum. Vivamus quam diam, suscipit sed velit vel, tincidunt imperdiet urna. Praesent dapibus augue a dignissim lacinia. Nullam pharetra volutpat ligula, quis aliquet mauris pharetra nec. Etiam finibus, neque in laoreet vehicula, lorem justo feugiat velit, ac accumsan neque lacus non tellus. Aliquam quis sagittis massa, a bibendum enim.</p>
        <p>Morbi vel elementum libero, vitae viverra est. Pellentesque sollicitudin neque at ligula suscipit, vel faucibus mauris consequat. Donec quis pharetra nulla, at tristique lacus. Nunc vel magna ultricies, hendrerit purus et, rhoncus dolor. Aliquam erat volutpat. Phasellus auctor malesuada augue, a iaculis sem mattis quis. Nulla facilisi.</p>
    </div>
    <div class="sidebar">
        <div class="box follow-scroll">
            Box (follows screen)
        </div>
    </div>
</div>

使用jquery创建一个div跟随滚动

2 个答案: