多个有相同class的div，怎样让在浏览器可见区域外的div隐藏，js ，jq都行 求大佬指点

div id="container_blog" class="container_blog">
                    <h3><a href="/" target="_blank">别让这些闹心的套路，毁了你的网页设计!</a></h3>
                    <span class="blogpic">
                        <a href="/" title=""><img src="img/avatar.jpg"/></a>
                    </span>
                    <p class="blogtext">分别是图片2，图片3。2、增加标签模板，用if，else if 来判断，输出。思路已打开，样式调用就可以多样化啦！... </p>
                    <div class="bloginfo">
                        <ul>
                          <li class="author"><a href="/">无锋</a></li>
                          <li class="lmname"><a href="/">学无止境</a></li>
                          <li class="timer">2018-5-13</li>
                          <li class="view"><span>34567</span>已阅读</li>
                          <li class="like">9999</li>
                        </ul>
                    </div>   
                    
                </div>
               
                <div id="container_blog" class="container_blog">
                    <h3><a href="/" target="_blank">别让这些闹心的套路，毁了你的网页设计!</a></h3>
                    <span class="blogpic">
                        <a href="/" title=""><img src="img/avatar.jpg"/></a>
                    </span>
                    <p class="blogtext">分别是图片2，图片3。2、增加标签模板，用if，else if 来判断，输出。思路已打开，样式调用就可以多样化啦！... </p>
                    <div class="bloginfo">
                        <ul>
                          <li class="author"><a href="/">无锋</a></li>
                          <li class="lmname"><a href="/">学无止境</a></li>
                          <li class="timer">2018-5-13</li>
                          <li class="view"><span>34567</span>已阅读</li>
                          <li class="like">9999</li>
                        </ul>
                    </div>   
                    
                </div>