Липкая боковая панель для блога Wordpress с использованием только CSS?

Я пытаюсь создать боковую панель в своем блоге Wordpress, чтобы прокручивать ее до тех пор, пока она не попадет в нижнюю часть области виджетов, а затем будет зафиксирована так, чтобы она всегда была видна, когда содержимое тела продолжает прокручиваться.Липкая боковая панель для блога Wordpress с использованием только CSS?

Примеры: 'Главные новости' Sidebar https://news.google.com/ - http://www.yelp.com/search?find_desc=restaurants&find_loc=San+Francisco%2C+CA&ns=1

Проблема заключается в том, 'Mo Карта Sidebar' 'положение: липкий;' не поддерживается в нескольких основных браузерах, поэтому я бы хотел избежать его использования. Есть ли альтернативный метод для этого, используя только CSS? Я еще не начал изучать javascript, но я готов начать раньше, чем планировалось, если кто-то может указать мне, где начать изучать его для этого желаемого эффекта.

Заранее благодарен!

источник

2015-06-25 Tre

ли приемлемая бортовая панель? Я знаю, что вы мало знаете о javascript, не говоря уже о jquery, поэтому я проведу вас через него (раньше был учителем).

// the beginning part is just like css. To find something, 
 
// \ | |/  use CSS and wrap it $('inside here') 
 
// \/ \/ \/ 
 
$('#superdiv').slideDown(800); // <----- slide down command, 
 
//         set with 800 millisecond duration 
 

 

 
// certain words have a special meaning in javascript, 
 
//  so we add '$' to the front to avoid errors 
 

 
// this variable is captured \/ with css and stored as '$sidebar' 
 
     var $sidebar = $("#superdiv"), 
 
    $window = $(window), 
 
    offset = $sidebar.offset(); // this gets the distance from our 
 
           // sidebar to the top of the screen 
 

 
$window.scroll(function() { 
 
    if ($window.scrollTop() > offset.top) { // if there is more space 
 
              // than the distance scrolled 
 
    $sidebar.stop().animate({ // stop the sidebar if it is moving, 
 
           // then start animation 
 
     marginTop: $window.scrollTop() - offset.top // slowly move the 
 
             // sidebar to the new location 
 
    }); 
 
    } else { 
 
    $sidebar.stop().animate({ // otherwise stop the animation and 
 
     marginTop: 0    // bring the sidebar back to the top 
 
    }); 
 
    } 
 
});

body { 
 
    background-color: lightblue; 
 
    border: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#superdiv { 
 
    background-color: orange; 
 
    position: absolute; 
 
    left: 0px; 
 
    width: 150px; 
 
    padding: 10px; 
 
    display: none; 
 
} 
 
#superpage { 
 
    padding: 10px; 
 
} 
 
#masterdiv { 
 
    padding-left: 170px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="masterdiv"> 
 
    <div id="superdiv">This is your sidebar. 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br>Your menu items 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    </div> 
 
    <div id="superpage">Here's the page 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br>1 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br>2 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br>3 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br>4 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br>5 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br>6 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br>7 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br>8 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br>9 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br>10 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br>11 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br>12 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br>13 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br>14 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br>15 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br>16</div> 
 
</div>

источник

2015-06-25 03:04:29 oMiKeY

Извините за поздний ответ, но спасибо за это. Он работает не так, как я хотел, но его творческий подход в конце дня, и вы легко поняли его, так что я, вероятно, в конечном итоге поеду, пока я не изучу javascript немного более подробно. – Tre

Я думаю, что если вам требуется JQuery вы могли бы посмотреть на этот ответ: Fix object to top of browser window when scrolling

Вам нужно будет импортировать библиотеку Jquery в <head></head> вашего сайта с помощью:

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
</head>

источник

2015-06-25 02:18:04 Matt

Спасибо за ссылку, я буду изучать его, как я учусь JavaScript/JQuery – Tre

Липкая боковая панель для блога Wordpress с использованием только CSS?

ответ

Смежные вопросы