அவை வலைப்பதிவுகள் மற்றும் பிற ஆதாரங்களின் பக்கங்களில் அடிக்கடி காணப்படுகின்றன. அத்தகைய வழிசெலுத்தல் பார்களின் பயன்பாடு மிகவும் நியாயமானது. இந்த jQuery செருகுநிரல்களின் செயலில் பயன்படுத்துவதற்கான முக்கிய காரணங்களில் ஒன்று, பக்கத்தின் கீழே இருந்தாலும், மெனு எப்போதும் பார்வையாளர்களின் விரல் நுனியில் இருக்கும். கூடுதலாக, ஒரு நிலையான மெனு சிறிய இடத்தை எடுக்கும் மற்றும் முக்கிய உள்ளடக்கத்திலிருந்து கவனத்தை திசை திருப்பாது. பொதுவாக, நிலையான மெனு தளத்தின் பயன்பாட்டினை மேம்படுத்துகிறது.
ஒரு நிலையான மெனுவைச் செயல்படுத்துவதற்கான சிறந்த jQuery செருகுநிரல்களின் தொகுப்பை நான் ஒன்றாக இணைத்துள்ளேன். ஒவ்வொரு செருகுநிரல்களும் ஏதோவொரு வகையில் தனித்துவமாக இருப்பதை உறுதிசெய்ய முயற்சித்தேன், அதனால் தேர்வில் இருந்து எந்த செருகுநிரலும் உங்கள் திட்டத்தில் குறிப்பாகப் பயன்படுத்தப்படும். சேகரிப்பில் நீங்கள் அனிமேஷன் போன்ற எளிய மற்றும் மிகவும் சிக்கலான செருகுநிரல்களைக் காணலாம்.
உங்களுக்கு மிகவும் எளிமையான நிலையான மெனு தேவைப்பட்டால், சமூக பொத்தான்களுடன் ஒட்டும் பேனலை நாங்கள் எவ்வாறு செயல்படுத்தினோம், jQuery செருகுநிரல்கள் இல்லாமல் நீங்கள் செய்யலாம், ஏனெனில் ஸ்கிரிப்ட்களுடன் பக்கத்தை ஏற்றுவது மிகவும் நல்லதல்ல, ஆனால் இதைப் பற்றி பின்வரும் கட்டுரைகளில் பேசுவோம். சுவாரஸ்யமான விஷயங்களைத் தவறவிடாமல் இருக்க, எங்கள் சேனல் அல்லது பக்கங்களுக்கு குழுசேரவும்.
அதனால். நிலையான மெனுவை உருவாக்குவதற்கான 6 jQuery செருகுநிரல்கள் இங்கே உள்ளன.

தானாக மறை Sticky HeaderjQuery நிலையான வழிசெலுத்தல் செருகுநிரல், இது மேலே உள்ள ஸ்கிரிப்ட் போன்ற கொள்கையில் செயல்படுகிறது, ஆனால் குறைவான மென்மையானது, இருப்பினும், முதல் பார்வையில், கொஞ்சம் எளிதானது. துரதிர்ஷ்டவசமாக, வழிசெலுத்தல் முழுமையாக மாற்றியமைக்கப்படுகிறது என்று என்னால் சொல்ல முடியாது, ஏனெனில் சிறிய திரைகளில் மெனு உருப்படிகள் வெறும் எண்களாக மாறும், இது மிகவும் விசித்திரமானது.

ஸ்க்ரோல் ஹெடரில் விளைவுகள் நிலையான வழிசெலுத்தல் பட்டிக்கான சக்திவாய்ந்த jQuery சொருகி. ஸ்க்ரோலிங் செய்யும் போது பக்கத்தில் சில பகுதிகளை அமைக்கலாம், அதை அடைந்தவுடன் பேனல் உருமாறி முற்றிலும் மாறலாம் தோற்றம். ஒரு பக்கத்தில் இதுபோன்ற பிரிவுகள் எத்தனை வேண்டுமானாலும் இருக்கலாம்.

ஆன்-ஸ்க்ரோல் அனிமேஷன் தலைப்பு ஒரு ஒட்டும் வழிசெலுத்தல் பட்டியை செயல்படுத்த ஒரு நல்ல செருகுநிரல். இது இப்படிச் செயல்படுகிறது: பக்கத்தின் ஆரம்பத்தில், லோகோ மற்றும் மெனுவைக் கொண்ட ஒரு உயரமான தலைப்பைக் காண்கிறோம். ஸ்க்ரோலிங் செய்யும் போது, ​​லோகோ மற்றும் நேவிகேஷன் உள்ளிட்ட அனைத்து உறுப்புகளையும் கொண்ட ஹெடர் பகுதி, பண்புகளைப் பயன்படுத்தி சீராக குறைந்து, திரையின் மேற்பகுதியில் ஒட்டிய குறுகலான பட்டையாக மாறும்.

வணக்கம், வலைப்பதிவு தளத்தின் அன்பான வாசகர்கள். எல்லாவற்றையும் திரும்பப் பெற விரும்பும்போது நான் சரியாக என்ன செய்தேன் என்பதை மறந்துவிடாமல் இருக்க, இது எனக்கு ஒரு குறிப்பு. Q2W3 நிலையான விட்ஜெட் (ஸ்டிக்கி விட்ஜெட்) என்று அழைக்கப்படும் வேர்ட்பிரஸ்ஸிற்கான செருகுநிரலைப் பற்றி எழுத வாசகர்களில் ஒருவர் பரிந்துரைத்தபோது இது தொடங்கியது, இது பக்கப்பட்டியில் உள்ள எந்த விட்ஜெட்டையும் மிதக்கச் செய்யலாம் அல்லது வேறுவிதமாகக் கூறினால், நிலையானது.

அந்த. நீங்கள் பக்கத்தை ஸ்க்ரோல் செய்யும் போது, ​​பக்கப்பட்டியின் முக்கிய பகுதி மேலே செல்வதைக் காண்பீர்கள், ஆனால் மிகக் கீழே அமைந்துள்ள விட்ஜெட் நீங்கள் உரையை எவ்வளவு தூரம் நகர்த்தினாலும் பார்க்கும் பகுதியில் இருக்கும். என்ன பதிவிட வேண்டும் என்பதை உடனே சொல்கிறேன் சூழ்நிலை விளம்பரம்இது தடைசெய்யப்பட்டுள்ளது மற்றும் அதற்காக தண்டிக்கப்படலாம் (கருத்துகளில் இது மாறியது - YAN இதை அனுமதிக்கிறது, ஆனால் Adsense இதைத் தடைசெய்கிறது).

சொருகி நன்றாக உள்ளது, ஆனால் விட்ஜெட்டுகள் எனது தீமில் முடக்கப்பட்டுள்ளன, எனவே நான் முடிவு செய்தேன் இந்த பணிஇணையத்தில் நான் கண்ட ஜாவாஸ்கிரிப்ட் குறியீட்டின் சில வரிகளைப் பயன்படுத்துகிறேன்.

இதன் விளைவாக, எனது டாப் மெனு வியூபோர்ட்டின் உச்சியில் சரி செய்யப்பட்டது (உண்மையில், இதற்கு CSS குறியீடு மட்டுமே போதுமானது, ஆனால் நாங்கள் எளிதான வழிகளைத் தேடவில்லை), மற்றும் கீழ் பகுதிபக்கத்தை ஸ்க்ரோல் செய்யும் போது பக்கப்பட்டியை நீங்கள் அடையும் போது திரையின் மேல் வலதுபுறத்தில் சரி செய்யப்பட்டது. இது ஏதேனும் பயன் தருமா என்று தெரியவில்லை, ஆனால் தீர்வு மிகவும் எளிது.

மெனுவை சரிசெய்து, மிதக்கும் பக்கப்பட்டியை ஏன் உருவாக்க வேண்டும்?

மேல் மெனுவை ஏன் சரிசெய்ய வேண்டும், நீங்கள் கேட்கிறீர்களா? சரி, பொதுவாக, இது முன்னேற்றம் என்ற தலைப்பில் ஒரு சிறிய பரிசோதனை. முற்றிலும் அனுமானமாக, இது பார்க்கப்பட்ட பக்கங்களின் எண்ணிக்கை மற்றும் தளத்தில் பயனர் செலவழித்த நேரத்தை அதிகரிக்கலாம் என்று நாம் கருதலாம்.

மறுபுறம், அத்தகைய நிலையான குழுவின் அதிகப்படியான ஊடுருவல் வாசகர்களிடமிருந்து எதிர்மறையான எதிர்வினையை ஏற்படுத்தக்கூடும், எனவே இந்த செயலின் பயன் பற்றிய கேள்வி திறந்தே உள்ளது. ஒரு வார பயன்பாட்டிற்குப் பிறகு நீங்கள் முடிவைப் பார்க்க வேண்டும் - மெனு இனி சரி செய்யப்படாவிட்டால் (பார்க்கும் பகுதியின் மேல் விளிம்பில் நகத்தால்), சோதனை தோல்வியடைந்தது. ஒரு வேளை, அது எப்படி நடந்தது என்பதை ஸ்கிரீன்ஷாட் எடுப்பேன்.

வேர்ட்பிரஸ்ஸில் மிதக்கும் பக்கப்பட்டி சற்று வித்தியாசமான காரணத்திற்காக உருவாக்கப்பட்டது - எதையாவது அதிக கவனத்தை ஈர்க்க. கொள்கையளவில், இங்கே நீங்கள் வகைகளின் பட்டியல் மற்றும் பிரபலமான அல்லது சமீபத்திய இடுகைகளின் பட்டியல் இரண்டையும் செருகலாம், இது நடத்தைகளை மேம்படுத்தும் பணியை மீண்டும் செய்ய முயற்சிக்கும். ஆனால் பெரும்பாலும், விளம்பரம் அத்தகைய மிதக்கும் தொகுதியில் வைக்கப்படுகிறது (சூழல் விளம்பரம் அனுமதிக்கப்படவில்லை, நான் ஏற்கனவே குறிப்பிட்டுள்ளபடி), இது முற்றிலும் அனுமானமாக, வெப்மாஸ்டரின் வருமானத்தை அதிகரிக்க வேண்டும். ஒரு வாரத்தில் முடிவைப் பார்க்கலாம்.

வேர்ட்பிரஸ் இல் சிறந்த மெனுவை எவ்வாறு சரிசெய்வது

இந்தப் பக்கத்தில் எனக்கான தீர்வைக் கண்டேன் - இணையதளத்தில் ஒரு பிளாக் அல்லது மெனுவை எவ்வாறு சரிசெய்வது. உபயோகத்திற்காக இந்த முறைஇணைக்கப்பட வேண்டும் jQuery நூலகம். இதை எப்படி செய்வது என்பது உள்ளடக்கத்தை ஏற்றுவது பற்றிய கட்டுரையில் விரிவாக விவரிக்கப்பட்டுள்ளது.

நீங்கள் நினைவில் வைத்திருந்தால், பக்க ஏற்றுதல் வேகத்தை மேம்படுத்துவது பற்றிய கட்டுரையில், நீங்கள் அனைத்து CSS மற்றும் JS ஐயும் பொதுவான ஒன்றாக இணைக்க முயற்சிக்க வேண்டும் (இரண்டு அர்த்தத்தில் - ஒன்று பாணிகளுக்கும் மற்றொன்று ஸ்கிரிப்ட்டுகளுக்கும்). எனவே, உண்மையில், நான் அத்தகைய கோப்பில் கீழே கொடுக்கப்பட்டுள்ள குறியீட்டின் வரிகளைச் சேர்த்தேன். நீங்கள் அவற்றை நேரடியாக சேர்க்கலாம் என்றாலும் HTML குறியீடு, ஸ்கிரிப்ட் குறிச்சொற்களால் சூழப்பட்டுள்ளது. எடுத்துக்காட்டாக, ஹெட் டேக்குகளுக்குள் உள்ள header.php டெம்ப்ளேட்டில் இதைச் செய்யலாம்.

நீங்கள் மேல் மெனுவைப் பயன்படுத்தி சரிசெய்யலாம் தூய CSS- எங்களுக்கு உதவ. உண்மையில், இதைப் பயன்படுத்தி இங்கு நிலைப்படுத்தலும் பயன்படுத்தப்படுகிறது CSS பண்புகள், ஆனால் ஒரு நிலையான மெனுவை உடனடியாகக் காட்டத் தொடங்க முடியாது, ஆனால் ஸ்க்ரோலிங் தொடங்கிய சிறிது நேரத்திற்குப் பிறகு (மேலே இருந்து ஒரு குறிப்பிட்ட தூரத்தில்).

என் விஷயத்தில், மேல் மெனுவை சரிசெய்வதற்கான குறியீடு இதுபோல் தெரிகிறது:

$(function())( $(window).scroll(function() (var top = $(document).scrollTop(); என்றால் (மேல்< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

இந்த குறியீட்டை நீங்கள் இதில் ஒட்டலாம் என்பதை நினைவூட்டுகிறேன்:

நீங்கள் பயன்படுத்தும் தீம் (/wp-content/themes/theme) உள்ள கோப்புறையில் இருக்கும் .js நீட்டிப்பு கொண்ட கோப்பு. உங்கள் தளத்தின் இணையப் பக்கங்களுடன் அதை ஏற்றுவதற்கு header.php கோப்பில் ஒரு வரி எழுதப்பட்டால் மட்டுமே அது உங்களுக்கு ஏற்றது, இது இப்படி இருக்கலாம்:

நீங்கள் header.php கோப்பைப் பயன்படுத்தலாம் இந்த குறியீடுதிறக்கும் மற்றும் மூடும் தலை குறிச்சொற்களுக்கு இடையே அதை ஸ்கிரிப்ட் குறிச்சொற்களில் போர்த்துதல், எடுத்துக்காட்டாக: $(செயல்பாடு())( $(window).scroll(function() (var top = $(document).scrollTop(); என்றால் (மேல்< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

வேறு எந்த இடத்திலும் இந்த குறியீட்டை ஸ்கிரிப்ட் குறிச்சொற்களில் எழுதலாம். முக்கிய விஷயம் என்னவென்றால், அது ஏற்றப்படுகிறது சரியான பக்கங்கள்வலைப்பதிவு. எடுத்துக்காட்டாக, இறுதி உடல் குறிச்சொல்லுக்கு முன் நீங்கள் அதை footer.php இல் செய்யலாம்.

இப்போது இந்த குறியீட்டை நேரடியாகப் பார்ப்போம். மேலே இருந்து 10 பிக்சல்கள் என்று மாறிவிடும் உறவினர் நிலைப்படுத்தல்நிலையான ஒன்றால் மாற்றப்பட்டது (மேலே கொடுக்கப்பட்டுள்ள இணைப்பில் உள்ள கட்டுரையைப் பார்க்கவும்). தேவைப்பட்டால், வேறு வரியில் பூஜ்ஜியமல்லாததை மேலே உள்ள மதிப்பாகத் தேர்ந்தெடுக்கலாம், பின்னர் மேலே உள்ள மெனு காட்சிப் பகுதியின் மேல் விளிம்பிலிருந்து பின்வாங்கும். கொடுக்கப்பட்ட மதிப்புபிக்சல்கள் (என் கருத்துப்படி, இது தேவையற்றது).

அசல் குறியீட்டைப் போலன்றி, நான் அகலத்தையும் சேர்க்க வேண்டியிருந்தது: "100%", இல்லையெனில் மெனு அளவு அகலத்தில் குறையும், இது முழு படத்தையும் கெடுத்துவிடும்.

பாருங்கள், தெளிவுக்காக, எனது மேல் மெனு உருவாக்கப்பட்ட Html குறியீட்டை வழங்குகிறேன் வேர்ட்பிரஸ் டெம்ப்ளேட்வலைப்பதிவு (இது எனது header.php கோப்பில் இருந்து வருகிறது):

• புதியது
• சிறந்த
• எங்கே பணம் சம்பாதிக்க
• விளம்பரம்
• தள வரைபடம்
• தொடர்புகள்
• மேல்

உங்கள் டெம்ப்ளேட்டில், பெரும்பாலும், மெனு உருப்படிகளின் காட்சியைப் பயன்படுத்தி குறிப்பிடப்படும், எடுத்துக்காட்டாக, அத்தகைய கட்டுமானம் (செயல்பாடு), ஆனால் இது முக்கியமல்ல.

• எதிரொலி "" இல் இணைக்கப்பட்ட குறியீட்டில் ஒற்றை மேற்கோள்கள் இருந்தால், அவை தப்பிக்க வேண்டும், அதாவது. அவை ஒவ்வொன்றின் முன்னும், அடைப்புக்குறி இல்லாமல், ஒரு பின்சாய்வு (\") வைக்கவும்.

  பொதுவாக, அது மாறியது போல் மாறியது. உங்கள் தலைப்பில் இதை எவ்வாறு இணைப்பது என்பதை நீங்களே முடிவு செய்ய வேண்டும் - உங்களுக்கு நேரம் கிடைக்கும்போது, ​​"உங்கள் மூளையை அலசுவது" கூட வேடிக்கையாக இருக்கிறது. நன்றி.

  அதிர்ஷ்டம் உங்களுக்கு உரித்தாகட்டும்! வலைப்பதிவு தளத்தின் பக்கங்களில் விரைவில் சந்திப்போம்

  நீங்கள் ஆர்வமாக இருக்கலாம்

  WebPoint PRO என்பது பரந்த செயல்பாடு மற்றும் திறமையான தொழில்நுட்ப தேடுபொறி உகப்பாக்கம் கொண்ட ஒரு பதிலளிக்கக்கூடிய வேர்ட்பிரஸ் தீம் ஆகும்.
  Share42 - தளத்தில் சமூக வலைப்பின்னல் பொத்தான்கள் மற்றும் புக்மார்க்குகளைச் சேர்ப்பதற்கான ஸ்கிரிப்ட் (மிதக்கும் குழு விருப்பம் உள்ளது)

  ஒரு வலைத்தளத்தை உருவாக்கும் போது, ​​தளத்தின் முக்கிய வழிசெலுத்தலைக் கொண்டிருக்கும் கிடைமட்ட மெனுவை அடிக்கடி பார்க்க வேண்டிய அவசியம் உள்ளது. கிடைமட்ட மெனுவை "சரிசெய்யும்" முறை பார்வையாளரின் பார்வையில் வசதியானது, "வழிசெலுத்தல் எப்போதும் கையில் இருக்கும்", நீங்கள் எவ்வளவு சக்கரத்தை கீழே அல்லது மேலே திருப்பினாலும் பரவாயில்லை.

  CSS உடன் கிடைமட்ட மெனுவை சரிசெய்தல்: நிலை: நிலையானது

  ஒருபுறம், எல்லாம் எளிமையானது மற்றும் எந்த நேரத்திலும் CSS ஐப் பயன்படுத்தி தீர்க்க எளிதானது. நிலையான கிடைமட்ட மெனுவின் HTML தளவமைப்புக்கான எடுத்துக்காட்டு:

  • வீடு
  • செய்தி
  • தொடர்புகள்
  • தேடு
  [பக்கம் உள்ளடக்கம்] [தள அடிக்குறிப்பு]

  நிலையான கிடைமட்ட மெனுவின் CSS தளவமைப்பு:

  # மெனு-மேல்-கிட்டத்தட்ட-நிலை (நிலை: நிலையானது; மேல்: 10px; இடது: 0; உயரம்: 30px; அகலம்: 100%; விளிம்பு: 0; )

  இப்போது பக்க உள்ளடக்கத்திற்கான உள்தள்ளலை மெனுவின் உயரத்திற்கு சமமாக அமைப்போம்:

  #உள்ளடக்கம் (விளிம்பு மேல்: 30px; )

  இப்போது நாம் "கிட்டத்தட்ட" வெற்றி பெற்றுள்ளோம். மெனு பார்வையாளர்களுக்கு எப்போதும் தெரியும். ஆனால், எங்கள் வடிவமைப்பில் தளத் தலைப்பும், அதைத் தொடர்ந்து மெனுவும், தலைப்பில் லோகோ, தளத்தின் குறிக்கோள் மற்றும் பேனர்களும் இருந்தால் நாம் என்ன செய்ய வேண்டும்.

  சரி, உள்ளடக்க உள்தள்ளலை தலைப்பு மற்றும் மெனுவிற்கும், அவற்றுக்கிடையே உள்ள உள்தள்ளலுக்கும் சமமான உயரத்தை உருவாக்குவதன் மூலம் தளத் தலைப்பை சரிசெய்யலாம். ஆனால் ஒரு சிக்கல் எழுகிறது. எங்கள் பார்வையாளர்கள் பக்க உள்ளடக்கத்தைப் பார்ப்பதற்காக பார்க்கும் இடத்தை கணிசமாகக் கட்டுப்படுத்துகிறோம். தொப்பியை கைவிடுவதற்கான விருப்பம் எங்களுக்கு பொருந்தாது.

  ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி கிடைமட்ட மெனுவை சரிசெய்தல்

  எனவே, தளத்தின் தலைப்புக்கு பின்னால் மெனு "செல்லும்" போது விருப்பத்தை கருத்தில் கொள்வோம், ஆனால் பார்வையாளர் தீவிரமாக கீழே உருட்டினால், மெனு மேலே "நிலையானது" மற்றும் இடத்தில் இருக்கும். தளத்தின் தலைப்பு தெரியவில்லை. பார்வையாளர் பக்கத் தலைப்பிற்குத் திரும்பினால், மெனு அதன் இடத்தில் "தளத்தின் தலைப்புக்குப் பின்னால்" "ஆகிறது". தொடங்குவதற்கு, எடுத்துக்காட்டு பக்க தளவமைப்பின் முழுமையான HTML தளவமைப்பு இங்கே:

  இணையதள லோகோ இணையதள முழக்கம் பேனர்

  • வீடு
  • செய்தி
  • தொடர்புகள்
  • தேடு
  [பக்கம் உள்ளடக்கம்] [தள அடிக்குறிப்பு]

  எங்கள் வலைத்தள டெம்ப்ளேட் பல பொதுவான பகுதிகளைக் கொண்டுள்ளது:

  • தள தலைப்புகள் - #தலைப்பு, உயரம் 150px
  • கிடைமட்ட மெனு - #மெனு-மேல்-கிட்டத்தட்ட-நிலையானது- உயரம் 30px,
  • பக்கத்தின் முக்கிய தகவல் பகுதி - #உள்ளடக்கம்,
  • தள அடிக்குறிப்பு - #அடிக்குறிப்பு.

  CSS தளவமைப்பு இதோ:

  #மெனு-மேல்-கிட்டத்தட்ட-நிலை (நிலை: நிலையானது; விளிம்பு: 0; இடது: 0; மேல்: 150px; உயரம்: 30px; ) #தலைப்பு (காட்சி: தொகுதி; உயரம்: 150px; வழிதல்: மறைக்கப்பட்டது; நிலை: உறவினர்; விளிம்பு -கீழே: 55px; ) #மெனு-மேல்-கிட்டத்தட்ட-நிலையான உல், #மெனு-மேல்-கிட்டத்தட்ட-நிலையான லி (பட்டியல்-பாணி: எதுவுமில்லை; விளிம்பு: 0; திணிப்பு: 0; ) #மெனு-மேல்-கிட்டத்தட்ட-நிலையான உல் (காட்சி: தொகுதி; உரை-சீரமைப்பு: மையம்; அகலம்: 100%; மிதவை: இடது; ) #மெனு-மேல்-கிட்டத்தட்ட-நிலையான உல் லி (காட்சி: இன்லைன்; வரி-உயரம்: 30px; அகலம்: 120px; திணிப்பு: 0 5px ; உரை சீரமை: மையம்;)

  முதலில், தலைப்பிலிருந்து உள்ளடக்கத்திற்கு நமது மெனுவின் உயரத்திற்கு சமமான ஒரு உள்தள்ளலை அமைப்போம் + அழகியல் அழகுக்கான விளிம்புடன் ஒரு சிறிய உள்தள்ளல். #தலைப்பு (விளிம்பு-கீழே: 55px; ) . தலைப்புக்குப் பின்னால் எங்கள் மெனுவைச் சரிசெய்வோம்: #menu-top-almost-fixed( நிலை: நிலையானது; விளிம்பு: 0; இடது: 0; மேல்: 150px; உயரம்: 30px; ) .

  இப்போது ஸ்க்ரோலிங் செய்யும் போது, ​​மெனு சரியாக பக்கத்தின் மேலே "சரிசெய்கிறது" என்பதை உறுதி செய்வோம். பின்வரும் ஜாவாஸ்கிரிப்டை இடையில் வைப்போம்:

  ஜாவாஸ்கிரிப்ட்:

  var m1 = 150; பிக்சல்களில் /* தலைப்பு உயரம் */ var m2 = 2; ஸ்க்ரோலிங் செய்யும் போது தலைப்பு தெரியாமல் இருக்கும் போது /* உள்தள்ளல் */ var menuID = "menu-top-almost-fixed"; /* ஐடி கிடைமட்ட மெனுவை பின் செய்ய */ var menuOpacityOnChange = "0.7"; ஸ்க்ரோலிங் செய்யும் போது மெனு வெளிப்படைத்தன்மை: 1 - ஒளிபுகா, 0.5 - ஒளிஊடுருவக்கூடிய 0.0 - முற்றிலும் வெளிப்படையான */ var menuOpacityOnChangeIE = menuOpacityOnChange * 100; /* ஆவணத்தின் மேற்பகுதியிலிருந்து ஸ்க்ரோல் ஸ்க்ரோலரின் தற்போதைய நிலைக்கு உள்தள்ளலின் குறுக்கு உலாவி தீர்மானிப்பதற்கான செயல்பாடு */ செயல்பாடு getScrollTop() (var scrOfY = 0; if(typeof(window.pageYOffset) == "எண்" ) ( //Netscape இணக்கமான scrOfY = window.pageYOffset ; ) இல்லையெனில் (document.body && (document.body.scrollLeft || document.body.scrollTop)) ( //DOM இணக்கமான scrOfY = document.body.scrollTop; ) வேறு if(document.documentElement && (document.documentElement. scrollLeft || document.documentElement.scrollTop)) ( //IE6 Strict scrOfY = document.documentElement.scrollTop; ) திரும்ப scrOfY; ) /* செயல்பாடு மேல் மிதக்கும் பேடிங்கிற்கு அமைக்கிறது ஸ்க்ரோலர் நிலை மற்றும் தெரிவுநிலை தலைப்புகளைப் பொறுத்து நிலையான கிடைமட்ட மெனு */ செயல்பாடு விளிம்புMenuTop() ( var top = getScrollTop(); var s = document.getElementById(menuID); if(typeof s != "defined" && s)( if (top) +m2< m1) { s.style.top = (m1-top) + "px"; s.style.filter = s.style.filter.replace("progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")",""); s.style.opacity = "1"; } else { s.style.top = m2 + "px"; s.style.opacity = menuOpacityOnChange; s.style.filter = s.style.filter.replace("progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")",""); s.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")"; } } } /** функция регистрирует вычисление позиции «плавающего» меню при прокрутке страницы **/ function setMenuPosition(){ if(typeof window.addEventListener != "undefined"){ window.addEventListener("scroll", marginMenuTop, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onscroll", marginMenuTop); } marginMenuTop(); } /** регистрируем вызов необходимых функций после загрузки страницы **/ if(typeof window.addEventListener != "undefined"){ window.addEventListener("load", setMenuPosition, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onload", setMenuPosition); }

  இந்த இணைப்பைப் பின்தொடர்ந்து உருள் சக்கரத்தைப் பயன்படுத்துவதன் மூலம் செயல்படுத்துவதற்கான உதாரணத்தை நீங்கள் பார்க்கலாம். எனவே, இங்கே எல்லாம் எளிது. அமைப்புகளில், பின்வரும் அளவுருக்களை ஸ்கிரிப்ட்டுக்கு அனுப்புகிறோம்:

  • var m1 = 150; - பிக்சல்களில் தலைப்பு உயரம்,
  • var m2 = 2; - ஸ்க்ரோலிங் செய்யும் போது தலைப்பு தெரியாமல் இருக்கும் போது உள்தள்ளல்,
  • var menuID = "menu-top-almost-fixed"; - பின் செய்ய கிடைமட்ட மெனுவின் ஐடி,
  • var menuOpacityOnChange = “0.7”; - உருட்டும் போது மெனு வெளிப்படைத்தன்மை:
    • 1 - ஒளிபுகா
    • 0.5 - ஒளிஊடுருவக்கூடியது
    • 0.0 - முற்றிலும் வெளிப்படையானது

  இந்த பதிப்பில், எங்கள் மெனுவை சிறிது "டியூன்" செய்துள்ளோம், மேலும் ஸ்க்ரோலிங் செய்யும் போது அதில் ஒளிஊடுருவைச் சேர்க்கிறோம். மெனுவின் வெளிப்படைத்தன்மையை மாற்றாமல், மெனுவிற்கான பின்னணியை மெனு வண்ணம் மற்றும் குறைந்த ஒளிஊடுருவக்கூடிய எல்லையுடன் (இதில் சாய்வு சீராக "மாற்றங்கள் "ஒரு ஒளிபுகா நிறத்தில் இருந்து வெளிப்படையான ஒன்றுக்கு):

  எங்கள் கிடைமட்ட நிலையான மெனுவிற்கான சிறிய CSS தளவமைப்பை மாற்றுவோம்:

  #menu-top-almost-fixed( நிலை: நிலையானது; விளிம்பு: 0; இடது: 0; மேல்: 150px; உயரம்: 30px; பின்னணி: url(./images/white-gradient-l.png) கீழே இடதுபுறம் மீண்டும்-x ;)

  இப்போது மாற்றியமைக்கப்பட்ட ஜாவாஸ்கிரிப்ட் குறியீட்டைக் கொடுப்போம், அதற்கு இடையில் வைப்போம்:

  ஜாவாஸ்கிரிப்ட்:

  var m1 = 150; பிக்சல்களில் /* தலைப்பு உயரம் */ var m2 = 0; ஸ்க்ரோலிங் செய்யும் போது தலைப்பு தெரியாமல் இருக்கும் போது /* உள்தள்ளல் */ var menuID = "menu-top-almost-fixed"; /* ஆவணத்தின் மேற்பகுதியிலிருந்து ஸ்க்ரோல் ஸ்க்ரோலரின் தற்போதைய நிலைக்கு உள்தள்ளலின் குறுக்கு உலாவி தீர்மானிப்பதற்கான செயல்பாடு */ செயல்பாடு getScrollTop() (var scrOfY = 0; if(typeof(window.pageYOffset) == "எண்" ) ( //Netscape இணக்கமான scrOfY = window.pageYOffset ; ) இல்லையெனில் (document.body && (document.body.scrollLeft || document.body.scrollTop)) ( //DOM இணக்கமான scrOfY = document.body.scrollTop; ) வேறு if(document.documentElement && (document.documentElement. scrollLeft || document.documentElement.scrollTop)) ( //IE6 Strict scrOfY = document.documentElement.scrollTop; ) திரும்ப scrOfY; ) /* செயல்பாடு மேல் மிதக்கும் பேடிங்கிற்கு அமைக்கிறது ஸ்க்ரோலர் நிலை மற்றும் தெரிவுநிலை தலைப்புகளைப் பொறுத்து நிலையான கிடைமட்ட மெனு */ செயல்பாடு விளிம்புMenuTop() ( var top = getScrollTop(); var s = document.getElementById(menuID); if(typeof s != "defined" && s)( if (top) +m2< m1) { s.style.top = (m1-top) + "px"; } else { s.style.top = m2 + "px"; } } } /** функция регистрирует вычисление позиции «плавающего» меню при прокрутке страницы **/ function setMenuPosition(){ if(typeof window.addEventListener != "undefined"){ window.addEventListener("scroll", marginMenuTop, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onscroll", marginMenuTop); } } /** регистрируем вызов необходимых функций после загрузки страницы **/ if(typeof window.addEventListener != "undefined"){ window.addEventListener("load", setMenuPosition, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onload", setMenuPosition); }

  எனவே, இங்கே எல்லாம் எளிது. அமைப்புகளில், பின்வரும் அளவுருக்களை ஸ்கிரிப்ட்டுக்கு அனுப்புகிறோம்:

  • var m1 = 150; - பிக்சல்களில் தலைப்பு உயரம்,
  • var m2 = 0; - ஸ்க்ரோலிங் செய்யும் போது தலைப்பு தெரியாமல் இருக்கும் போது உள்தள்ளல்.
  மெனு நன்றாக வேலை செய்கிறது, ஆனால் நீங்கள் பக்கத்தை மீண்டும் ஏற்றினால், மெனு முதல் உள்தள்ளலுடன் தோன்றும்

  அத்தகைய சிக்கல் இருந்தால், பக்கத்தை ஒரு முறை ஏற்றிய பின் மெனுவை அழைக்க வேண்டும். இதைச் செய்ய, செயல்பாட்டு அழைப்புக் குறியீட்டை இதிலிருந்து மாற்றவும்:

  செயல்பாடு setMenuPosition())( if(typeof window.addEventListener != "undefined")( window.addEventListener("ஸ்க்ரோல்", marginMenuTop, false); ) else if(typeof window.attachEvent != "undefined")( window. attachEvent ("ஆன்ஸ்க்ரோல்", விளிம்பு மெனுடாப்); );

  பின்வரும் குறியீட்டிற்கு:

  செயல்பாடு setMenuPosition())( if(typeof window.addEventListener != "undefined")( window.addEventListener("ஸ்க்ரோல்", marginMenuTop, false); ) else if(typeof window.attachEvent != "undefined")( window. attachEvent ("ஆன்ஸ்க்ரோல்", மார்ஜின்மெனுடாப்); ) marginMenuTop(); );

  பக்கம் ஏற்றப்பட்ட பிறகு, நாங்கள் உடனடியாக எங்கள் marginMenuTop செயல்பாட்டை அழைக்கிறோம், இது பக்கத்தில் உள்ள மெனுவின் நிலையைச் சரிபார்த்து விரும்பிய பாணியைப் பயன்படுத்தும்.

  ட்விட்டர் பூட்ஸ்டார்ப்பில் இருந்து Afixx jQuery செருகுநிரலைப் பயன்படுத்தி ஓரளவு நிலையான மெனுவை செயல்படுத்துதல்

  இந்தத் தலைப்பின் தொடர்ச்சியாக, Twitter பூட்ஸ்டார்ப் கட்டமைப்பிலிருந்து jQuery Affix செருகுநிரலைப் பயன்படுத்தி கிட்டத்தட்ட நிலையான மெனுவைச் செயல்படுத்துவது குறித்து உங்களுக்காக ஒரு கட்டுரை எழுதப்பட்டது.

  சமீபத்தில், ஒரு போக்கு நாகரீகமாகிவிட்டது: ஒரு பக்கத்தை ஸ்க்ரோல் செய்யும் போது ஒரு நிலையான மெனு. பொதுவாக இது லேண்டிங் பேஜ் தளங்களில் கிடைமட்ட மெனுவாக இருக்கும்.

  இது எவ்வாறு செயல்படுகிறது என்றால், பக்கம் ஏற்றப்படும் போது, ​​​​மெனு பக்கத்தில் ஒரு குறிப்பிட்ட இடத்தில் அமைந்துள்ளது (எடுத்துக்காட்டாக, "தலைப்பு" கீழ்), மற்றும் நீங்கள் பக்கத்தை உருட்டும்போது, ​​​​அது உலாவி சாளரத்தின் மேலே சரி செய்யப்படுகிறது மற்றும் மற்ற உள்ளடக்கத்தைப் போல உருட்டுவதில்லை.

  பார்வையாளர் பக்கத்தை ஸ்க்ரோல் செய்து பக்கத்தின் தொடக்கத்தை அடைந்தால், மெனு அதன் இடத்திற்குத் திரும்பும். இதனால், பார்வையாளர், பக்கத்தில் எங்கும் இருப்பதால், அதைப் பயன்படுத்தி தளத்தின் பிற பக்கங்களுக்குச் செல்லலாம். இது மிகவும் வசதியானது மற்றும் பயன்பாட்டுக் கொள்கைகளுக்கு இணங்குகிறது.

  உங்கள் நேரத்தை குறைந்தபட்சம் செலவழித்து, நிபுணர்களின் உதவியை நாடாமல், அத்தகைய மெனுவை எவ்வாறு செயல்படுத்துவது என்பதை இப்போது நான் உங்களுக்கு சொல்கிறேன்.

  முதலில், நாம் தளத்திற்கான jQuery நூலகத்தை இணைக்க வேண்டும்

  < script src= "//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" >

  நீங்கள் உள்நாட்டில் அல்லது Google வழியாக இணைக்கலாம்.

  உள்நாட்டில் இணைக்க, அதிகாரப்பூர்வ வலைத்தளமான http://jquery.com/ இலிருந்து jQuery கோப்பைப் பதிவிறக்க வேண்டும்.

  CSS

  

  ஜாவாஸ்கிரிப்ட்

  

  ஸ்கிரிப்டில், நாங்கள் 2 மாறிகளை உருவாக்குகிறோம், அதில் தலைப்பின் உயரம் மற்றும் தொகுதியின் உள்தள்ளலின் மதிப்புகளை மேலே உள்ள மெனுவுடன் சேமிக்கிறோம். உள்தள்ளல் இல்லாமல் இருக்கலாம் (இந்த வழக்கில் உள்ளது போல). பின்னர் சாளர பொருளின் onScroll நிகழ்வுக்கு ஒரு கையாளுதலை எழுதுகிறோம். அதில், ஸ்க்ரோல்டாப்() முறையைப் பயன்படுத்தி, பக்கத்தின் மேற்புறத்திலிருந்து ஸ்க்ரோல் ஸ்க்ரோலரின் தற்போதைய நிலைக்கு உள்ள தூரத்தைக் கணக்கிடுகிறோம். கணக்கீட்டின் அடிப்படையில், மெனுவுடன் தொகுதியை நிலைநிறுத்துகிறோம்.

  அவ்வளவுதான், எளிய தீர்வுகளுக்கு நன்றி, தளத்தின் முக்கிய பகுதியை ஸ்க்ரோல் செய்யும் போது உருட்டாத அழகான நிலையான மெனுவை நீங்கள் அடையலாம்

  உங்கள் தளத்தில் நீங்கள் மெனுவைக் காண விரும்பும் இடத்தில் எங்கள் HTML குறியீட்டை ஒட்டுவதே முதலில் நாங்கள் செய்வோம்.

  • வீடு
  • வேர்ட்பிரஸ்
  • HTML5&CSS3
  • PHP

  மெனு இயல்புநிலை வகுப்பாக ஒதுக்கப்பட்டுள்ளது, இதற்கு நன்றி, இந்த குறிப்பிட்ட தொகுதியை மேலே பின் செய்ய வேண்டும் என்பதை எங்கள் jQuery தீர்மானிக்க முடியும்.

  2. jQuery குறியீடு

  தலைப்பில், மூடும் தலைக்கு முன், குறியீட்டைச் செருகவும். நான் மேலே எழுதியது போல், இது கிளாஸ் டிஃபால்ட்டுடன் ஒரு பிளாக் வரையறுக்கிறது மற்றும் ஸ்க்ரோலிங் செய்த பிறகு அதை வகுப்பு நிலையானதாக ஒதுக்குகிறது. உங்களுக்கு தேவைப்பட்டால், வகுப்புகளின் பெயர்களை மாற்றலாம். ஆனால் கவனமாக இருங்கள் மற்றும் எதையும் தவறவிடாதீர்கள், இல்லையெனில் எல்லாம் வெறுமனே வேலை செய்வதை நிறுத்திவிடும். நீங்கள் jQuery, HTML மற்றும் CSS இல் மாற்ற வேண்டும்.

  $(document).ready(function())( var $menu = $("#menu"); $(window).scroll(function())( if ($(this).scrollTop() > 100 && $ மெனு. hasClass("default"))( $menu.fadeOut("fast",function())( $(this).removeClass("default") .addClass("fixed transbg") .fadeIn("fast") ; )) ; ) இல்லையெனில் ($(இது).scrollTop()