plug/s1-smart-sticky-anything/s1-smart-sticky-anything.php

137 lines
5.7 KiB
PHP
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<?php
/*
Plugin Name: Smart Sticky Header with Scroll Interval
Description: Sticky header с интервалом скролла и клонированием (оригинал остаётся на месте)
Version: 1.2.0
*/
add_action('admin_menu', function() {
add_options_page(
'Sticky Header Settings',
'Sticky Header',
'manage_options',
'smart-sticky-header',
'ssh_settings_page'
);
});
function ssh_settings_page() {
if (isset($_POST['save_settings'])) {
update_option('ssh_sticky_selector', sanitize_text_field($_POST['sticky_selector']));
update_option('ssh_start_scroll', intval($_POST['start_scroll']));
update_option('ssh_end_scroll', intval($_POST['end_scroll']));
echo '<div class="updated"><p>Настройки сохранены!</p></div>';
}
$selector = get_option('ssh_sticky_selector', '#masthead, .site-header, header');
$start_scroll = get_option('ssh_start_scroll', 100);
$end_scroll = get_option('ssh_end_scroll', 0);
?>
<div class="wrap">
<h1>Настройки Sticky Header</h1>
<form method="post">
<table class="form-table">
<tr>
<th><label>CSS-селектор хедера/меню</label></th>
<td>
<input type="text" name="sticky_selector" value="<?php echo esc_attr($selector) ?>" style="width:400px;" placeholder="#masthead, .site-header, header"/>
<p class="description">Можно несколько через запятую. Используй инспектор браузера для точного селектора.</p>
</td>
</tr>
<tr>
<th><label>Минимальный скролл (px)</label></th>
<td>
<input type="number" name="start_scroll" value="<?php echo esc_attr($start_scroll) ?>" min="0" style="width:100px;"/>
<p class="description">Sticky появляется после этого значения (default: 100).</p>
</td>
</tr>
<tr>
<th><label>Максимальный скролл (px)</label></th>
<td>
<input type="number" name="end_scroll" value="<?php echo esc_attr($end_scroll) ?>" min="0" style="width:100px;"/>
<p class="description">Sticky скрывается после этого значения. 0 — без лимита (default: 0).</p>
</td>
</tr>
</table>
<?php submit_button('Сохранить настройки', 'primary', 'save_settings'); ?>
</form>
</div>
<?php
}
add_action('wp_enqueue_scripts', function() {
if (is_admin()) return;
$selector = get_option('ssh_sticky_selector', '#masthead, .site-header, header');
$start_scroll = get_option('ssh_start_scroll', 100);
$end_scroll = get_option('ssh_end_scroll', 0);
// Выводим CSS и JS inline для простоты (можно вынести в файлы)
?>
<style id="ssh-sticky-css">
.ssh-sticky-clone {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 9998 !important;
background: #ffffff;
box-shadow: 0 3px 8px rgba(0,0,0,0.12);
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
transform: translateY(-100%);
display: none; /* Initially hidden */
}
.ssh-sticky-clone.ssh-visible {
opacity: 1;
transform: translateY(0);
display: block !important;
}
body.admin-bar .ssh-sticky-clone {
top: 32px !important;
}
@media (max-width: 782px) {
body.admin-bar .ssh-sticky-clone {
top: 46px !important;
}
}
</style>
<script id="ssh-sticky-js">
document.addEventListener('DOMContentLoaded', function() {
const selectors = '<?php echo esc_js($selector); ?>'.split(',').map(s => s.trim());
const startScroll = <?php echo intval($start_scroll); ?>;
const endScroll = <?php echo intval($end_scroll); ?>;
let originalHeader = null;
for (let sel of selectors) {
originalHeader = document.querySelector(sel);
if (originalHeader) break;
}
if (!originalHeader) return; // Не нашли хедер
// Клонируем
const clone = originalHeader.cloneNode(true);
clone.classList.add('ssh-sticky-clone');
document.body.appendChild(clone);
// Функция проверки скролла
function checkScroll() {
const scrollY = window.scrollY;
if (scrollY >= startScroll && (endScroll === 0 || scrollY <= endScroll)) {
clone.classList.add('ssh-visible');
} else {
clone.classList.remove('ssh-visible');
}
}
// Слушатели
window.addEventListener('scroll', checkScroll);
window.addEventListener('resize', checkScroll); // На всякий случай
checkScroll(); // Инициализация
});
</script>
<?php
}, 999); // Высокий приоритет, чтобы после других скриптов